TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Anubhav Chaudhary
26
41.8k
20m
Paging, Sorting, Searching on jQgrid
Jul 2 2014 2:28 AM
Hello Everyone,
I have some problems with jQgrid regarding Sorting, paging and Searching.
I had created a jQgrid in which some data is bind using the webservice, data is shown in grid, all of it's components are also shown like tool for searching, Adding, updating and so on---,
SORTING:- I had applied sorting on one of the column but if I click on the column name it's not sorted, it shows that it's "loading" and after that it again come in the same format.
PAGING:- Paging is also not working on it, it only shows one page even if data is more than number of rows.
SEARCHING:- As I click on Search button, it displays a panel where I enter some text according to which the Grid should be filtered, but Search button also not working.
Here is my code:
$('#<%=lbl.ClientID%>').click(function () {
debugger;
$.extend($.jgrid.defaults,
{ datatype: 'json' },
{
ajaxGridOptions: {
contentType: "application/json",
success: function (data, textStatus) {
debugger;
if (textStatus == "success") {
debugger;
var thegrid = $("#contactsList")[0];
var gr = thegrid.rows;
var output = eval(data.d.rows);
var trying;
var newArr = [];
for (trying = 0; trying < output.length; trying++) {
debugger;
newArr.push({
Recognition_Type: output[trying].cell[0],
Recognition_Number: output[trying].cell[1]
});
}
thegrid.addJSONData(newArr);
thegrid.grid.hDiv.loading = false;
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;
}
}
}
}
});
$("#contactsList").jqGrid({
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
url: 'WebService.asmx/GetDataTable',
datatype: 'json',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Recognition_Type', 'Recognition_Number'],
colModel: [
{ name: 'Recognition_Type', index: 'Recognition_Type', width: 280, sortable: true, sorttype: 'text', align: "center", hidden: false },
{ name: 'Recognition_Number',index:'Recognition_Number', width: 300, hidden: false }
],
rowNum: 4,
rowList: [4, 20, 300],
pager: "#gridpager",
viewrecords: true,
multiSort: true,
jsonReader: {
repeatitems: false
},
sortname: 'Recognition_Type asc, Recognition_Number',
sortorder: 'desc',
gridview: true,
rownumbers: true,
autowidth: true,
height: 230,
caption: 'Reports'
})
$("#contactsList").jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true },
{},
{},
{},
{ multipleSearch: true, multipleGroup: true });
})
});
Reply
Answers (
4
)
Hide or disable jquery accordian tab 2nd and 3rd tab
how to use ajax call in jquery