jquery easyui真のページング方法

5158 ワード

htmlページコード:
<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}    ',  
	 	    });
	 	    */
	 }