Can slickgrid page and display json

We want to load several thousand records to the client when the page is requested and have the first 25 records displayed. The user should then be able to page through the records or resort the list by column or filter by data in various columns. We're opting to load the data to the client in one lump sum because we'd rather have a heavier load in the page request and faster performance when viewing or editing data after. I can't see any example for paging on the SlickGrid site. Does SlickGrid have paging baked in or is it so lightweight I'd have to implement this myself? Does anyo开发者_JAVA百科ne have any links or examples to share that would give me a headstart?

The data we'll be using will be json data.

There is paging support in 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"));

You will also want somewhere on your page for it to render.

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

I have written a pager plugin, the SlickGrid Enhancement Pager, that makes SlickGrid pagination use much easier. It fully supports json. Please see this project on github.

//set columns
var columns = [
    {
        id: "mid",
        name: "MID",
        field: "mid",
        cssClass: "cell-title",
        sortable: true,
        sorter:comparer
    },
    {
        id: "id",
        name: "ID",
        field: "id",
        cssClass: "cell-title",
        sortable: true,
        sorter:NumericSorter
    },

In the above set the sorter

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]);
}

This puzzled me for a while too, until I got the code below to work:

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();
});

I've been coding with slickgrid for about a week now and found that I had to write sort and filter code myself. Looking through the source, I don't see anything that indicates paging is built in. You'll spend a good amount of time writing code for it, but it seems to be worth it.

I loaded 30,000 rows of data using ajax/json and it loads and sorts in less than 1 second. I don't know if it will be any help, but this is the method I call to load my grid. It sorts on the client and filters on the server:

$.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();
    };
});

When the sort method is called, the array bound to the grid (data) is rearranged, and then the grid is reloaded using the .render() method. In order to page, you'll have to have an array of all data, and an array of displayed data.

He does have an example of paging here, but being the javascript amateur I am, it's difficult for me to follow.