Click here to Skip to main content
15,881,715 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi i'm using jqgrid and json object.i'm getting the data but paging and search not working..means when i click on next page same data is appearing and in search too..plzzz help me.
my entire jqGrid, for reference:

 $(document).ready(function () {
     var numberTemplate = { formatter: 'number', align: 'center', sorttype: 'number' };
     jQuery("#UsersGrid").jqGrid({
        url: 'Jqg.aspx/GetDataTable',
        datatype: 'json',
        mtype: 'GET',
        ajaxGridOptions: { contentType: "application/json",
            success: function (data, textStatus) {
                if (textStatus == "success") {
                    var thegrid = $("#UsersGrid")[0];
                    thegrid.addJSONData(data.d);
                    thegrid.grid.hDiv.loading = false; alert('success');
                    switch (thegrid.p.loadui) {
                        case "disable":
                            break;
                        case "enable":
                            $("#load_" + thegrid.p.id).hide();
                            break;
                        case "block":
                            $("#lui_" + thegrid.p.id).hide();
                            $("#load_" + thegrid.p.id).hide();
                            break;
                    }
                }
            },
            error: alert('failed')
        },

        postData: {
            FilePath: function () {
                return $("#FilePath").text();
            },
            Filter: function () {
                return $("#Filter").text();
            },
            submenu: function () {
                return $("#lblSubmenu").text();
            }
        },
        mtype: 'POST',
        colNames: ['Sr_No', 'Errors', 'File Name', 'Date', 'action'],
        colModel: [{ name: 'Sr_No', index: 'Sr_No', key: true, width: 100, align: 'center', sortable: true, sorttype: 'integer', searchtype: "integer", searchrules: { "required": true, "number": true, "maxValue": 13} },
               { name: 'Errors', index: 'Errors', width: 100, align: 'center', search: true, sorttype: "int", sortable: true },
               { name: 'File Name', index: 'files', search: true, stype: 'text', width: 500, sorttype: "string", align: 'center', sortable: true },
               { name: 'Date', index: 'Date', width: 100, search: true, sortable: true, sorttype: "date", align: 'center', sorttype: 'date',
                   formatter: 'date', formatoptions: { newformat: 'M-d-Y' }, datefmt: 'M-d-Y'
               },
               { name: 'action', index: 'action', align: 'center', sortable: false, search: false, formatter: displayButtons}],
        pager: '#UsersGridPager',
        viewrecords: true,
        imgpath: 'Images/jqgrid',
        rowNum: 5,
        rowList: [5, 10, 20],
        gridview: true,
        loadonce: false,
        rownumbers: false,
        sortname: 'Sr_No',
        sortorder: 'desc',
        localReader: { id: 'Sr_No' },
        editurl: 'clientArray',
        clickOnPagination : function() { $(this).jqGrid("clearGridData"); $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); },
        cmTemplate: {
            searchoptions: {
                sopt: ['cn', 'eq', 'ne']//comment out this out tp resolve error
            },
            searchrules: {
                required: true
            }
        },
        height: '100%',
        serializeGridData: function (postData) {
            var propertyName, propertyValue, dataToSend = {};
            for (propertyName in postData) {
                if (postData.hasOwnProperty(propertyName)) {
                    propertyValue = postData[propertyName];
                    if ($.isFunction(propertyValue)) {
                        dataToSend[propertyName] = propertyValue();
                    } else {
                        dataToSend[propertyName] = propertyValue
                    }
                }
            }

            return JSON.stringify(dataToSend);
        }
    });
    jQuery("#UsersGrid").navGrid('#UsersGridPager',
    { add: false, edit: false, del: false, refresh: false },
    {},
    {},
    {},
    { multipleSearch: true, multipleGroup: true, afterRedraw: function () {
        $(this).find(".input-elm").triggerHandler('change', [true]);
    }
    });
    function displayButtons(cellvalue, options, rowObject) {
        var View = "<a href="#" target="_blank">View</a>";
        var Download = "<a href="/Download/" target="_blank">Download</a>";
        return View + Download;
    }
});
Posted
Updated 12-Sep-13 3:41am
v6

1 solution

Hi, For Paging please check below code
loadonce: true,
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function (obj) { return $("#tblVendorData").jqGrid('getGridParam', 'page'); },
                total: function (obj) { return Math.ceil(obj.length / $("#tblVendorData").jqGrid('getGridParam', 'rowNum')); },
                records: function (obj) { return obj.length; }
            },

Basically make loadonce as true
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900