1.新增分頁欄的步驟。

    1.1  .jsp頁面    <div id="wfgs2010Pager"></div>

<div id="wfgs2010GyousyaData" class="grid-table" >
    <table id="gridGyousyaData"></table>
    <div id="wfgs2010Pager"></div>
</div>

  1.2 .js頁面  在table下方新增div，jqGrid中 pager:"wfgs2010Pager" 引數為新增分頁欄的引數。該專案做了內部封裝。

$("#gbox_gridGyousyaData").remove();
$("#wfgs2010GyousyaData").append("<table id='gridGyousyaData'></table>");
$("#wfgs2010GyousyaData").append("<div id='wfgs2010Pager'></div>");
$("#gridGyousyaData").jqGrid({
		data: dataList,
		datatype:"local",
		multiboxonly:true,
		cellEdit:false,
		cellsubmit:'clientArray',
		colNames:colNames,
		colModel:colModel,
		width:gridWidth,
		height:gridHeight,
		pager:"wfgs2010Pager",
		rowNum:10,
		gridview: true,
		scroll:true,
		regional:'ja',
		onSelectRow:function(rowid, status){
			var row = $("#gridGyousyaData").jqGrid('getRowData',rowid);
			setRowData(row);
			$("#selRow").val(rowid);
		}
	});
 

2.複製原有的jqGridS時，grid底部只出現了藍色div區域，並未出現分頁及相關控制元件。

原因：scroll      建立一個動態滾動的表格，當為true時，翻頁欄被禁用

方法：當需要使用分頁欄時，去掉jqGrid中scoll引數。

3.問題：查出多條資料，設定了分頁欄但所有資料任然在一頁顯示。

.

原因：下圖1初始化時建立了grid 圖2在後臺查到資料後，返回js,在給grid賦值時，

            gridGyousyaData")[0].addJSONData(result.resultList);把查到的資料都賦給了第一頁。

function createGyousyaDataGrid(data){
	var dataList = [];

	if(data && data.length > 0) {
		dataList = data;
	}

	$("#gbox_gridGyousyaData").remove();
	$("#wfgs2010GyousyaData").append("<table id='gridGyousyaData'></table>");
	$("#wfgs2010GyousyaData").append("<div id='wfgs2010Pager'></div>");
	$("#gridGyousyaData").jqGrid({
		data: dataList,
		datatype:"local",
		multiboxonly:true,
		cellEdit:false,
		cellsubmit:'clientArray',
		colNames:colNames,
		colModel:colModel,
		width:gridWidth,
		height:gridHeight,
		pager:"wfgs2010Pager",
		rowNum:10,
		gridview: true,
		//scroll:true,
		regional:'ja',
		onSelectRow:function(rowid, status){
			var row = $("#gridGyousyaData").jqGrid('getRowData',rowid);
			setRowData(row);
			$("#selRow").val(rowid);
		}
	});
}
 

function setGridData(){
     var postData = {
			keyword:$("#keyword").val(),
			kaisiNendo:$("#kaisiNendo").val(),
			gyoumu:$("#gyoumu").val(),
	}
	$.ajax({
		url: sofia.contextPath() + "/keiyaku/wfgs2000/wfgs2010/getGyoushaGrid.do",
		dataType: "json",
		async:false,
		type:"post",
		data: postData
	}).done(function(result) {
		$("#gridGyousyaData").jqGrid("clearGridData");
		if(result.resultList == null){
			//
			sofia.ui.showDialogJsMsg("E", "存在しません。");
			$("#gridGyousyaData")[0].addJSONData([{}]);
		}else{
			$("#gridGyousyaData")[0].addJSONData(result.resultList);
			//createGyousyaDataGrid(result.resultList);
			for(var i=0;i<10;i++){
				$("#jqgh_gridGyousyaData_nendo"+(i+1)).html(result.colum["nendo"+i]);
			}
		}
		sofia.ui.dispLoader(false);
	});
}

方法：所以如果沒有分頁欄賦值時，可以採用該方法賦值。

           有分頁欄的賦值時，需要再走一遍初始化，從而來實現將所有的查到的資料分頁顯示。

function setGridData(){
	var postData = {
			keyword:$("#keyword").val(),
			kaisiNendo:$("#kaisiNendo").val(),
			gyoumu:$("#gyoumu").val(),
	}
	$.ajax({
		url: sofia.contextPath() + "/keiyaku/wfgs2000/wfgs2010/getGyoushaGrid.do",
		dataType: "json",
		async:false,
		type:"post",
		data: postData
	}).done(function(result) {
		$("#gridGyousyaData").jqGrid("clearGridData");
		if(result.resultList == null){
			//
			sofia.ui.showDialogJsMsg("E", "存在しません。");
			$("#gridGyousyaData")[0].addJSONData([{}]);
		}else{
			//$("#gridGyousyaData")[0].addJSONData(result.resultList);
			createGyousyaDataGrid(result.resultList);
			for(var i=0;i<10;i++){
				$("#jqgh_gridGyousyaData_nendo"+(i+1)).html(result.colum["nendo"+i]);
			}
		}
		sofia.ui.dispLoader(false);
	});
}