Jquery 是否可以打开网格页面并显示json

我们希望在请求页面时将数千条记录加载到客户端，并显示前25条记录。然后，用户应该能够逐页浏览记录，或按列访问列表，或按不同列中的数据进行筛选。我们选择一次性将数据加载到客户端，因为我们希望在页面请求中有更大的负载，并且在之后查看或编辑数据时有更快的性能。我看不到在SlickGrid站点上进行分页的任何示例。SlickGrid是否加入了分页功能，或者它是如此轻量级，以至于我不得不自己实现它？是否有人有任何链接或例子分享，这将给我一个开端

---

我们将使用的数据将是json数据。

我已经用slickgrid编写了大约一周的代码，发现我必须自己编写排序和筛选代码。通过查看源代码，我没有看到任何指示内置分页的内容。您将花费大量时间为其编写代码，但这似乎是值得的

我使用ajax/json加载了30000行数据，它在不到1秒的时间内加载和排序。我不知道这是否有帮助，但这是我调用的加载网格的方法。它在客户端上排序，在服务器上筛选：

$.getJSON(baseUrl + '/_GetNewHires?filter=' + filter, function (data) {
    grid = new Slick.Grid($("#NewHiresGrid"), data, columns, options);

    grid.onSort = function (sortCol, sortAsc) {
        sortdir = sortAsc ? 1 : -1;
        sortcol = sortCol.field;

        if (sortAsc == true)
            data.sort(compare);
        else
            data.reverse(compare);

        grid.render();
    };
});

调用sort方法时，将重新排列绑定到网格（数据）的数组，然后使用.render（）方法重新加载网格。为了进行分页，您必须有一个包含所有数据的数组和一个显示数据的数组

---

他确实有一个分页的例子，但作为javascript的业余爱好者，我很难理解。

这也让我困惑了一段时间，直到我得到了下面的代码：

grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onSort.subscribe(function(e,args) {
    sortcol = args.sortCol;
    sortAsc = args.sortAsc;

    alert("Sort On " + sortcol.field);

    if (sortAsc == true) {
        data.sort(function (a, b) {
            var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });
    } else {
        data.reverse(function (a, b) {
            var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });
    }

    grid.invalidateAllRows();
    grid.render();
});

grid=new Slick.grid（“myGrid”，数据、列、选项）；
grid.onSort.subscribe（函数（e，args）{
sortcol=args.sortcol；
sortAsc=args.sortAsc；
警报（“分拣开启”+分拣控制字段）；
if（sortAsc==true）{
数据排序（函数（a，b）{
变量nameA=a[sortcol.field].toLowerCase（），nameB=b[sortcol.field].toLowerCase（）
if（nameA名称B）
返回1
返回0//默认返回值（无排序）
});
}否则{
数据反转（功能a、b）{
变量nameA=a[sortcol.field].toLowerCase（），nameB=b[sortcol.field].toLowerCase（）
if（nameA名称B）
返回1
返回0//默认返回值（无排序）
});
}
grid.invalidateAllRows（）；
grid.render（）；
});

SlickGrid/slick.dataview.js中提供分页支持

dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.setPagingOptions({
   pageSize: 25,
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));

您还需要在页面上的某个位置进行渲染

<div id="myPager"></div>

在上述设置中，分拣机

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var searchString = "";

this.grid.onSort = function(sortCol, sortAsc) {
    sortdir = sortAsc ? 1 : -1;
    sortcol = sortCol.field;
    this.dataView.sort(sortCol.sorter);
    this.grid.render();

}.bind( this );

function comparer(a,b) {
    var x = a[sortcol], y = b[sortcol];
    return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
}

// Define some sorting functions
function NumericSorter(a, b) {
  return sortdir *  (a[sortcol]-b[sortcol]);
}

---

我已经编写了一个寻呼机插件，SlickGrid增强寻呼机，它使SlickGrid分页使用更加容易。它完全支持json。请在github上查看此内容。

谢谢。我开始研究jqGrid，它似乎更合适。这是一个遗憾，因为我真的很喜欢slickGrid的外观，它看起来很强大！您可以添加一些文本来解释您的代码段吗？：）

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var searchString = "";

this.grid.onSort = function(sortCol, sortAsc) {
    sortdir = sortAsc ? 1 : -1;
    sortcol = sortCol.field;
    this.dataView.sort(sortCol.sorter);
    this.grid.render();

}.bind( this );

function comparer(a,b) {
    var x = a[sortcol], y = b[sortcol];
    return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
}

// Define some sorting functions
function NumericSorter(a, b) {
  return sortdir *  (a[sortcol]-b[sortcol]);
}