CODEWITHSUNDEEP
jqgridjqgrid-php
Rob Wilkerson
Rob Wilkerson

Reputation: 41236

How Do I Load jqGrid w/o an Ajax Request?

Every single example of jsGrid usage that I've found/seen shows data being loaded through an Ajax request. I'd like to load the grid based on data that's already available; a separate request is completely unnecessary unless it's a technical requirement.

I'd really like my controller to pull the data required for display in the grid, pass it along to my view and let jqGrid do its thing based on that local data rather than initiating another request. I can't imagine that's not possible, but I haven't found even a single example that doesn't use the url configuration to acquire the data in JSON format.

Surely, the data loader isn't this narrow, but can someone point me to an example that isn't ajax-centric?

Thanks.

Upvotes: 1

Views: 2968

Answers (2)

Oleg
Oleg

Reputation: 221997

Starting with the version 3.7 jqgrid has full local support including data sorting paging and so on.

So yo can use data or datastr parameter. The usage of localReader can be needed see documentation. Here is simple example:

var mydata = [
    { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "11", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "12", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "13", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "14", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "15", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
    { id: "16", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
    { id: "17", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
    { id: "18", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
var grid = $("#list");
grid.jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
    colModel: [
        { name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
        { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
        { name: 'name', index: 'name', width: 100 },
        { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
        { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
        { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
        { name: 'note', index: 'note', width: 150, sortable: false }
    ],
    pager: '#pager',
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    height: "100%",
    caption: "Simple loading of local data"
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: true, refresh: true });

Upvotes: 2

Jakub Konecki
Jakub Konecki

Reputation: 46008

Look at the jqGrid examples here. Expand 'Loading data' and click on 'Array data'.

Upvotes: 1

Related Questions