Can a slickgrid page display json

Question

We want to load several thousand records to the client when requesting the page and display the first 25 records. Then the user should be able to leaf through records or use a list by columns or filter data in different columns. We prefer to download data to the client at a time, because we prefer to have a heavier load in the page request and better performance when viewing or editing data after. I don't see any swap example on the SlickGrid site. Does SlickGrid have baked paging or is it so light that I would have to implement it myself? Does anyone have any links or examples to share that will give me a hat?

The data we will use will be json data.

Answer 1

I read the code using slickgrid for about a week and found that I need to write sort and filter code. Looking through the source code, I see nothing that indicates that paging is built-in. You will spend a lot of time creating code for it, but it seems worth it.

I downloaded 30,000 rows of data using ajax / json and it loads and sorts in less than 1 second. I don’t know if this will be of any help, but this is the method I call to load my grid. It sorts by 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();
    };
});

, , (), , .render(). , .

, , javascript, .

Answer 2

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>

Answer 3

-, SlickGrid Enhancement Pager, SlickGrid. json. . github.

Answer 4

, :

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

Answer 5

//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
    },

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