CODEWITHSUNDEEP
jquerysearchjqgridlocal
jose
jose

Reputation: 2543

jqGrid search on local data

I'm using jqGrid plugin to show some data (locally), so

    $("#myList").jqGrid({
        datatype : 'jsonstring',
        datastr : getMyJson(),
        colNames : ['ID', 'TITLE', 'PROFILE'],
        colModel : [{
            name : 'Id',
            index : 'Id',
            width : 50,
            sorttype : 'int'
        }, {
            name : 'Title',
            index : 'Title',
            width : 100
        }, {
            name : 'Profile',
            index : 'Profile',
            width : 80
        }],
        jsonReader : {
            root : "rows",
            page : "page",
            total : "total",
            records : "records",
            repeatitems : true,
            cell : "cell",
            id : "id"
        },
        autoencode : true,
        ignoreCase : true,
        autowidth : true,
        cache : false,
        shrinkToFit : false,
        height : 500,
        rowNum : 3000,
        rowList : [10, 20, 30],
        pager : jQuery('#pager1'),
        viewrecords : true,
        sortable : true,
        loadonce : true,
        gridview : true,
        sortorder : "asc",
        multiselect : true,
        caption : "My List",
        emptyrecords : 'No results'
    });

$("#myList").jqGrid('filterToolbar', {
    stringResult : true,
    searchOnEnter : false
});

The problem is about searching. When I enter text on any toolbar for searching, all row data disappear. I've seen this demo http://www.trirand.com/blog/jqgrid/jqgrid.html and I can't find what is wrong.

Is there anything missing on my grid?

Thanks in advance

EDIT: 

function getMyJson() {
    var json;
    jQuery.ajaxSetup({
        async : false
    });
    $.post(BIN_ROOT + "getdata.php", function(data, textStatus) {
        json = data.Mytable;
    }, "json");
    jQuery.ajaxSetup({
        async : true
    });

    return json;
}

The Json has the following format

{
    "errorCode": 0,
    "errorDesc": "No Error",
    "MyTable": {
        "page": 1,
        "total": 1,
        "records": 12,
        "rows": [{
            "id": "41",
            "cell": ["41", "Title1", "User"]
        }, {
            "id": "30",
            "cell": ["30", "Title1", "Admin"]
        }, (...)
    }
}

Upvotes: 0

Views: 3514

Answers (1)

Oleg
Oleg

Reputation: 221997

Sorry, but I don't see any problem in the grid which you posted. Look at the demo.

One thing I can recommend you additionally. You should better use datatype: 'json' and mtype: 'POST' to get the data directly from the server without needs to make separate $.post call. You need just use the following settings:

$("#myList").jqGrid({
    url: BIN_ROOT + "getdata.php",
    datatype: 'json',
    mtype: 'POST',
    jsonReader : {
        root : "MyTable.rows",
        page : "MyTable.page",
        total : "MyTable.total",
        records : "MyTable.records"
    },
    //... other parameter which you use
});

See the next demo.

Upvotes: 1

Related Questions