Can slickgrid page and display json

Question

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.

score 9 · Answer 1 · answered Jun 01 '11 at 15:16

9

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>

answered Jun 01 '11 at 15:16

JensenDied

661
5
8

2

Also check out the AJAX loading example for how to retrieve select blocks of data [http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html](http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html) – Josh Russo Mar 23 '12 at 14:41

score 2 · Answer 2 · edited Oct 01 '12 at 10:37

2

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.

edited Oct 01 '12 at 10:37

bool.dev

17,508
5
69
93

answered Oct 01 '12 at 07:40

KingleeMa

21
1

score 1 · Answer 3 · edited Jun 19 '16 at 14:46

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

Welcome to StackOverflow! Could you add some text to explain your code snippet? :) — asteri, Nov 30 '12 at 17:26

score 1 · Answer 4 · answered Aug 25 '11 at 21:19

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

score 0 · Accepted Answer · answered Nov 16 '10 at 20:25

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.

Thanks. I started to look into jqGrid which seems more suited. It's a shame because I really liked the look of slickGrid it looked powerful. — lloydphillips, Nov 23 '10 at 20:47

Can slickgrid page and display json

5 Answers5