Menu
The following code does not reload the grid.
$("#myjqgrid").trigger('reloadGrid');
If I understand it correctly, it should make an ajax call and reload the grid even if there are no changes to the data.
HTML
<table id="myjqgrid"></table>
<div id="Pager"></div>
JSON
{
"colModel": [
{
"name": "ID",
"label": "ID",
"width": 60,
"align": "left",
"jsonmap": "cells.0.value",
"sortable": true
},
{
"name": "FirstName",
"label": "FirstName",
"width": 100,
"align": "left",
"jsonmap": "cells.1.value",
"sortable": false
},
{
"name": "LastName",
"label": "LastName",
"width": 100,
"align": "left",
"jsonmap": "cells.2.value",
"sortable": false
}
],
"colNames": [
"ID",
"FirstName",
"LastName"
],
"mypage": {
"outerwrapper": {
"page":"1",
"total":"1",
"records":"20",
"innerwrapper": {
"rows":[
{
"id":"1",
"cells":
[
{
"value":"12345",
"label": "ID"
},
{
"value":"David",
"label": "FirstName"
},
{
"value":"Smith",
"label": "LastName"
}
]
},
{
"id":"2",
"cells":
[
{
"value":"37546",
"label": "ID"
},
{
"value":"Willy",
"label": "FirstName"
},
{
"value":"Peacock",
"label": "LastName"
}
]
},
{
"id":"3",
"cells":
[
{
"value":"62345",
"label": "ID"
},
{
"value":"Kim",
"label": "FirstName"
},
{
"value":"Holmes",
"label": "LastName"
}
]
},
{
"id":"4",
"cells":
[
{
"value":"186034",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"5",
"cells":
[
{
"value":"67345",
"label": "ID"
},
{
"value":"Paul",
"label": "FirstName"
},
{
"value":"Lawrence",
"label": "LastName"
}
]
},
{
"id":"6",
"cells":
[
{
"value":"12906",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Charlery",
"label": "LastName"
}
]
},
{
"id":"7",
"cells":
[
{
"value":"564565",
"label": "ID"
},
{
"value":"Bets",
"label": "FirstName"
},
{
"value":"Josilyn",
"label": "LastName"
}
]
},
{
"id":"8",
"cells":
[
{
"value":"34345",
"label": "ID"
},
{
"value":"Pink",
"label": "FirstName"
},
{
"value":"Floyd",
"label": "LastName"
}
]
},
{
"id":"9",
"cells":
[
{
"value":"3429",
"label": "ID"
},
{
"value":"Rose",
"label": "FirstName"
},
{
"value":"Ben",
"label": "LastName"
}
]
},
{
"id":"10",
"cells":
[
{
"value":"6668",
"label": "ID"
},
{
"value":"Amy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"11",
"cells":
[
{
"value":"22786",
"label": "ID"
},
{
"value":"Zarine",
"label": "FirstName"
},
{
"value":"Khan",
"label": "LastName"
}
]
},
{
"id":"12",
"cells":
[
{
"value":"56444",
"label": "ID"
},
{
"value":"Dolly",
"label": "FirstName"
},
{
"value":"Mathews",
"label": "LastName"
}
]
},
{
"id":"13",
"cells":
[
{
"value":"99453",
"label": "ID"
},
{
"value":"Ginger",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"14",
"cells":
[
{
"value":"1234",
"label": "ID"
},
{
"value":"Fabrice",
"label": "FirstName"
},
{
"value":"Papa",
"label": "LastName"
}
]
},
{
"id":"15",
"cells":
[
{
"value":"45000",
"label": "ID"
},
{
"value":"Helen",
"label": "FirstName"
},
{
"value":"Kites",
"label": "LastName"
}
]
},
{
"id":"16",
"cells":
[
{
"value":"1255",
"label": "ID"
},
{
"value":"Barbara",
"label": "FirstName"
},
{
"value":"Dorris",
"label": "LastName"
}
]
},
{
"id":"17",
"cells":
[
{
"value":"5555",
"label": "ID"
},
{
"value":"Eugene",
"label": "FirstName"
},
{
"value":"Mark",
"label": "LastName"
}
]
},
{
"id":"18",
"cells":
[
{
"value":"1867",
"label": "ID"
},
{
"value":"Harry",
"label": "FirstName"
},
{
"value":"King",
"label": "LastName"
}
]
},
{
"id":"19",
"cells":
[
{
"value":"45888",
"label": "ID"
},
{
"value":"Lorraine",
"label": "FirstName"
},
{
"value":"Williams",
"label": "LastName"
}
]
},
{
"id":"20",
"cells":
[
{
"value":"4567777",
"label": "ID"
},
{
"value":"Mark",
"label": "FirstName"
},
{
"value":"Sheppard",
"label": "LastName"
}
]
},
{
"id":"21",
"cells":
[
{
"value":"7777",
"label": "ID"
},
{
"value":"Davis",
"label": "FirstName"
},
{
"value":"Sheppard",
"label": "LastName"
}
]
}
]
}
}
}
}
JQGrid definition
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
715
It seems to me that you have just problem with loadonce: true which change the datatype to 'local' after the first load of data. So the paging, sorting and filtering of data works locally.
If you look exactly what is paging, sorting and filtering you will see that it's mot more as changing of some parameters of jqGrid and reloading of the grid locally. So the paging, sorting and filtering work locally only because the reload of the grid works locally.
If you need to refresh the data of the grid from the server you need just reset the datatype to it's initial value ('json' or 'xml') and then reload the grid.
See here and here for code examples.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
