jqgrid中服务器端分页中的AJAX调用问题

时间:2017-06-23 11:22:34

标签: jsp pagination jqgrid

我正在尝试在jqgrid中实现服务器端分页(没有客户端分页),但是无法理解如何在上一次和下一次按钮单击时进行ajax调用。我在一个jsp中有多个jqgrid。

我的代码是:



 jq("#next_pager").click(function () {
             start =  start+ pageLimit;
             gridData = nextSubset(mydata, start, pageLimit);
             if(gridData.length > 0){
                 jq('#next_pager').removeClass('ui-state-disabled');
                 jq('#list').jqGrid('setGridParam', {data: gridData}).trigger('reloadGrid');
             }else{
                 start = 0;
                 jq('#next_pager').removeClass('ui-state-disabled');
             }
         });
         jq("#prev_pager").click(function (){

             if(start > pageLimit){
                 start =  start - pageLimit;
             }else{
                 start = 0;
             }

             gridData = preSubset(mydata, start, pageLimit);
             
             jq('#prev_pager').removeClass('ui-state-disabled');
             jq('#list').jqGrid('setGridParam', {data: gridData}).trigger('reloadGrid');
             
         }); 

     function nextSubset(mydata, start, pageLimit){
         var subsetData = [];

         for(var index = start; index < start + pageLimit; index++){
                 subsetData.push(mydata[index]);
         }
         return subsetData;
     }

     function preSubset(mydata, start, pageLimit){
         var subsetData = [];

         for(var index = start - pageLimit; index < start; index++){
                 subsetData.push(mydata[index]);
         }
         return subsetData;
     }
     
     
function fetchPendingData() {
			var pendingParams = {};
			pendingParams.urlPath = 'path to backend controller';
			pendingParams.requestType = 'GET';
			pendingParams.data = null;
			pendingParams.callBackFunc = fetchPendingDataSuccess;
			verificationHandler.InitConfig(pendingParams.urlPath,
					pendingParams.requestType, pendingParams.callBackFunc,	pendingParams.data,null,pendingParams.token,pendingParams.header);
			verificationHandler.MakeAjaxCall();
		}

		//Ajax success for Pending data for registration tab
	    function fetchPendingDataSuccess(response) {
	        pendingData = JSON.parse(JSON.stringify(response));
	        jq("#pendingListTable").jqGrid('clearGridData');
	        for (var index = 0; index < pendingData.length; index++) {
	            reformatePendingDataJson(index);
	           // var gridData = nextSubset(mydata, start, pageLimit);
	            loadPendingGridData(index + 1, pendingData[index]);
	        }
	    }
&#13;
<div class="tabs standard">
	<ul class="tab-links">
		<li class="active"><a href="#tab1" data-toggle="tab"
				id="VerificationTab" aria-expanded="false">Reporting Entity</a></li>
		<li><a href="#tab2" data-toggle="tab"
				id="profileEntityChangeVerificationTab" aria-expanded="true">Reporting Entity Profile Change</a></li>
	</ul>
   <div class="tab-content">
			<div id="tab1" class="tab active"
									aria-labelledby="VerificationTab">
				<ul class="nav nav-pills">
					<li role="presentation" class="active"><a
											href="#pendingUserList" id="pendingUserTab" role="tab" data-toggle="tab" aria-controls="pendingUser"
											aria-expanded="false">Pending</a></li>
				</ul>
				<div class="tab-content" id="reportUploadTabsContent">
					<form class="tab-pane active" role="tabpanel"
											id="pendingUserList" aria-labelledby="pendingUserTab" method="post">

				<table id="pendingListTable"
							class="table table-bordered table-hover">
				</table>
				<div id="pendingPjmap"></div>
				</form>
	</div>
</div>  
<div id="tab2" class="tab fade" aria-labelledby="profileEntityChangeVerificationTab">
	<ul class="nav nav-pills">
			<li role="presentation" class="active"><a href="#pendingUserProfile" id="pendingUserProfilelink"
	role="tab" data-toggle="tab" aria-controls="pendingUserProfile" aria-expanded="false">Pending</a></li>
  </ul>
	<div class="tab-content">
		<div class="tab-pane fade in active" id="pendingUserProfile">
      <table id="REPendingTable" width="100%" border="1">
      </table>
    </div>
  </div>
	</div>
</div>
&#13;
&#13;
&#13;

如何在上一个和下一个按钮上调用ajax以及如何在jqgrid中加载它?

0 个答案:

没有答案