0
Вот мой код для привязки Jqgrid, в моем scnario я получаю 25000 записей, которые делают сетку очень медленной, поэтому мне нужно реализовать пользовательский пейджинг в JqGrid, так что только 50 записей должны загружаться сразу.Пользовательский пейджинг в Jqgrid с использованием службы WCF и asp.net
<script type="text/javascript">
$(document).ready(function() {
$("#TableDataGrid").jqGrid({
url: '/DataHandler.ashx?MethodName=TFNUserView&GroupNameQuery=<%=Master.GroupName %>&isadminCheck=<%=Master.Admin %>&isActiveCheck=<%=false %>',
datatype: "json",
colNames: ['ID', 'TFN', 'Group', 'Sub Group', 'Tactic', 'Sub Tactic', 'Micro Tactic',
'Campaign Name', 'Campaign Start Date', 'Campaign End Date', 'PCC',
'Segmentation', 'Vanity Description', 'Message', 'Notes', 'Organization', 'Product', 'Owner', 'Agency', ],
prmNames: { id: 'TFN' },
colModel: [
{
name: 'ID', index: 'ID', hidden: true,
editoptions: { disabled: true }, width: 80, "sortable": true, editable: true, sorttype: 'integer',
searchoptions: {
sopt: ['eq'], dataInit: function (elem) {
$(elem).height(21).width(40);
}
}, searchrules: { required: true }
},
{
name: 'TFN', index: 'TFN', key: true, edittype: 'select', formatter: 'showlink', width: 110,
formatoptions: { baseLinkUrl: 'TFNEdit.aspx' }, editable: true, sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ne'],
dataInit: function (elem) {
$(elem).height(21).width(60);
}
}, searchrules: { required: true }
},
{ name: 'TeamName', index: 'TeamName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'LanguageGroupName', index: 'LanguageGroupName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'TacticName', index: 'TacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'SubtacticName', index: 'SubtacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'MicrotacticName', index: 'MicrotacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'MarketingCampaignName', index: 'MarketingCampaignName', width: 190, editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{
name: 'MarketingCampaignStartDate', index: 'MarketingCampaignStartDate', width: 190, editable: true, sorttype: 'date',
searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/Y', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },
editoptions: {
size: 12, dataInit: function (elem) {
setTimeout(function() {
$(elem).datepicker({ showOn: 'button' });
}, 100);
}
}, searchrules: { required: true }
},
{
name: 'MarketingCampaignEndDate', index: 'MarketingCampaignEndDate', width: 190, editable: true, sorttype: 'date',
searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/Y', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },
editoptions: {
size: 12, dataInit: function (elem) {
setTimeout(function() {
$(elem).datepicker({ showOn: 'button' });
}, 100);
}
}, searchrules: { required: true }
},
{ name: 'PCC', index: 'PCC', editable: true, sorttype: 'text', width: 190, searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Segmentaion', index: 'Segmentaion', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'VanityDescription', index: 'VanityDescription', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'GeneralNotes', index: 'GeneralNotes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Notes', index: 'Notes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Organization', index: 'Organization', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkAdmin() },
{ name: 'Product', index: 'Product', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkAdmin() },
{ name: 'OwnerName', index: 'OwnerName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Agency', index: 'Agency', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }
],
rowNum: 20,
rowList: [20, 100, 1000,10000],
pager: $('#DivPager'),
viewrecords: true,
loadonce: true,
sortable: true,
width: "100%",
autowidth: false,
shrinkToFit: false,
forceFit: false,
ignoreCase: true,
caption: "TFN User View"
});
$("#TableDataGrid").jqGrid('filterToolbar', { searchOperators: true });
$("#TableDataGrid").jqGrid('navGrid', '#DivPager', { add: false, edit: false, del: false, cancel: true, save: true, addtext: "Add", edittext: "Edit", deltext: "Delete", searchtext: "Search", refreshtext: "Refresh" },
$("#TableDataGrid").setGridParam({
onPaging: function (pgButton) {
var pageNumber = $("#TableDataGrid").getGridParam("page");
var lastPage = $("#TableDataGrid").getGridParam("lastpage");
alert(pageNumber + "" + lastPage);
//...
}
});
// var requestedPage = $("#grid").getGridParam("page");
// var lastPage = $("#grid").getGridParam("lastpage");
</script>
Here is json response
response = Convert.ToString(TfnUserView(groupName,isAdminCheck,isActiveCheck));
Я звоню службы WCF здесь код
public string TfnUserView(string groupName, string isAdminCheck)
{
using (TFNEntities db = new TFNEntities())
{
var serializer = new JavaScriptSerializer();
serializer.MaxJsonLength = Int32.MaxValue;
string[] groupNames = groupName.Split(',');
string jsonData = "";
var query = from st in db.TFN_Campaigns
join tac in db.TFN_Records on st.TFN equals tac.TFN
join rou in db.TFN_ROUTING_REFERENCE_VIEW on st.TFN equals rou.TOLL_FREE_NO
where st.Status == false && tac.IsUnable == false
select new
{
st.TFN,st.Language,st.TeamName,st.CreatedOn,st.Status,tac.IsUnable,rou.ROUTE_TYPE ,
rou.ROUTE_DESCRIPTION
};
if (isAdminCheck == "True" || isAdminCheck == "true")
{
jsonData = serializer.Serialize(query.ToList().OrderBy(item => item.ROUTE_DESCRIPTION).Take(200254));
}
else
{
jsonData = serializer.Serialize(query.Where(item => groupNames.Contains(item.TeamName)).OrderBy(i=>i.ROUTE_DESCRIPTION).Take(25000));
}
return jsonData;
}
}
В чем проблема? – Sachin
Я новичок в Jqgrid, в настоящее время я показываю сразу 25000 записей и занимает 10 секунд для загрузки, поэтому мне нужно реализовать пользовательский пейджинг, чтобы сразу отобразить только 50 записей и остальных записей при нажатии следующей страницы и так далее на, я прочитал много блогов, но не нашел решения, –
просмотрите эту ссылку: http://trirand.com/blog/jqgrid/jqgrid.html – Sachin