lloydphillips lloydphillips -5 years ago 202
jQuery Question

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 anyone have any links or examples to share that would give me a headstart?

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

Answer Source

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)


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download