jquery easyui真のページング方法
5158 ワード
htmlページコード:
htmlページ呼び出しjs:
jsメソッドの実装:
<table id="bugListTable" style="height: 640px;">
<thead style="height: 31px">
<tr>
<th data-options="field:'id',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'status',width:calColumnWidth(0.05), formatter:function(value,row,index){
return $('#bugStatus .status_' + value).html();
}"> </th>
<th data-options="field:'bugFrom',width:calColumnWidth(0.06), formatter:function(value,row,index){
return ' GM ';
}"> </th>
<th data-options="field:'title',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'content',width:calColumnWidth(0.1)"> </th>
<th data-options="field:'pid',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'areaId',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'roleId',width:calColumnWidth(0.08)"> ID</th>
<th data-options="field:'userId',width:calColumnWidth(0.1)"> ID</th>
<th data-options="field:'roleName',width:calColumnWidth(0.08)"> </th>
<th data-options="field:'vipLevel',width:calColumnWidth(0.05),formatter:function(value,row,index){
return 'VIP : ' + value;
}"> </th>
<th data-options="field:'questionType',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'ownerName',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'lastOperatorName',width:calColumnWidth(0.05)"> </th>
<th data-options="field:'addTime',width:calColumnWidth(0.12), formatter:function(value,row,index){
var time = new Date();
time.setTime(value);
return time.bfFormatter();
}"> </th>
<th data-options="field:'operation',width:calColumnWidth(0.04), formatter:function(value,row,index){
return value;
}"> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
htmlページ呼び出しjs:
commonServerPagination('#bugListTable', undefined, "${ctx}/pss/bug/search.do", {
'startTime':function(){
return $('#startTime').val();
},
'endTime':function(){
return $('#endTime').val();
},
"conditionType":function(){
return $('#conditionType').val();
},
"condition":function(){
return $('#condition').val();
},
"worldId":function(){
return $('#worldId').val();
}
});
jsメソッドの実装:
function commonServerPagination(selector, filter, url, extraParams,paraObj){
paraObj = paraObj || {};
var lf = pagerFilter;
if(filter != undefined){
lf = filter;
}
$(selector).datagrid({
pagination:true,
pageSize:paraObj.pageSize||50,
pageList:paraObj.pageList||[10,20,30,40,50,100,500,1000],
singleSelect:true,
striped:true,
rownumbers:20,
autoRowHeight:false,
render:'frozen',
nowrap:false,
url:url,
onBeforeLoad: function (param) {
if(extraParams){
for(var key in extraParams){
if(key == 'editorField'){
continue;
}
if(typeof extraParams[key] == 'function'){
param[key] = extraParams[key]();
}else{
param[key] = extraParams[key];
}
}
}
},
onLoadSuccess: function(data){
// for(var i = 0; i < data.rows.length; i++){
// if(loadSuccessCallback){
// loadSuccessCallback(data.rows[i]);
// $(selector).datagrid('refreshRow', i);
// }
// }
},
onDblClickCell: function(index,field,value){
var hiddenEditingIndex = $(selector).parent().find('.hiddenEditingIndex').val();
if((hiddenEditingIndex && hiddenEditingIndex != index) || (extraParams && extraParams['editorField'] && extraParams.editorField.indexOf(field) == -1)){
return;
}
var editingIndex = $(selector).datagrid('beginEdit');
$(selector).datagrid('beginEdit', index);
var ed = $(selector).datagrid('getEditor', {index:index,field:field});
if(ed){
$(ed.target).focus();
}
}
});
/* var p = $('#punishListTable').datagrid('getPager');
$(p).pagination({
pageSize: 10,// , 10
pageList: [5,10,15],//
beforePageText: ' ',//
afterPageText: ' {pages} ',
displayMsg: ' {from} - {to} {total} ',
});
*/
}