JqPagination动态分页，每次点击下一页都加载一次后台

javascript:

function initProductPage(currentPage) {   

    //删除相关数据(删除Id为edc的tbody的相关数据，移除Class为content的tr的行数据) 

       //设置每一页展示的产品数量，如果要调整的话可能需要自行修改样式

       var perPage = "6"; 

       $("#itemContainer").empty(); 

      $.ajax( {  

          url : '<c:url value="loadProduct.do"/>'+'?currentPage='+currentPage+'&perPage='+perPage,  

          type : 'post',  

          success : function(dataArray) {   

              if (dataArray != null || dataArray != "") {  

                  // 解析相关json 格式数据  

                  var dataObj = dataArray.data;

                  for ( var i = 0; i < dataObj.length; i++)   

                  {       

                      var li  ="  <li class='goodlist' style='text-align: left;border:1px solid red;padding:10px;margin:1px;margin-left:15px;float:left;width:18%'>" +
/* "<input type='checkbox' class='productGirdCheckBox' name='"+dataObj[i].entityId+"' id='"+dataObj[i].entityId+"' value='"+dataObj[i].entityId+"' style='overflow:hidden; display:block;
float:none;'>"+ */

                    "<a href='#'   class='"+dataObj[i].entityId+"'   onclick='showProdInfo(this.className);' style='overflow:hidden; display:block; float:none;text-align:center;'><img height='150px;' src='"+dataObj[i].thumbnailPath
 +"'></a>"+

                    " <dl style='width: 100%;'> <div style='border:1px solid gray;padding:5px;margin:5px;'> <dt > <a href='#' target='_blank' class='title'>"+dataObj[i].productName +"</a>"+     

                               " <span class='en'>"+dataObj[i].categoryName+ "</span> "+   

                                "<p><spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyPrice'></spring:message><span class='change-price"+dataObj[i].entityId+"'>"+dataObj[i].suppRetailPrice+"</span></p>"+

                                "<p><spring:message code='pm.buyPm.searchForm.supplierInst'></spring:message>:<span>"+dataObj[i].instName +"</span></p>"+

                                "<p><a href='javascript:;' class='buy'  onclick=\"submitOrders('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\")>"+     

                                "<spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyProduct'></spring:message> <a href='javascript:;' class='putToCart'  onclick=\"put2Cart('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\"><spring:message
code='pm.buyPm.searchForm.initPmProductInfo.intro.putToShoppingCart'></spring:message> </a></p>"+

                        "</dt></div></dl></li>";       

                       $("#itemContainer").append(li);       

                  }    

                  $('.JqPagination').jqPagination({

                 link_string : '/?page={page_number}',

                 current_page: dataArray.currentPage, //设置当前页 默认为1

                 max_page : dataArray.totalPage, //设置最大页 默认为1

                 page_string : '当前第{current_page}页,共{max_page}页',

                 paged : function(page) {
      //设置每一页展示的产品数量，如果要调整的话可能需要自行修改样式
      var perPage = 6; 

                     //删除相关数据
      $("#itemContainer").empty(); 
     $.ajax( {  
         url : '<c:url value="loadProduct.do"/>'+'?currentPage='+page+'&perPage='+perPage,  
         type : 'post',  
         success : function(dataArray) {   
             if (dataArray != null || dataArray != "") {  
                 // 解析相关json 格式数据  
                 var dataObj = dataArray.data;
                 for ( var i = 0; i < dataObj.length; i++)   
                 {       
                     var li  ="  <li class='goodlist' style='text-align: left;border:1px solid red;padding:10px;margin:1px;margin-left:15px;float:left;width:18%;'>" +
/* "<input type='checkbox' class='productGirdCheckBox' name='"+dataObj[i].entityId+"' id='"+dataObj[i].entityId+"' value='"+dataObj[i].entityId+"' style='overflow:hidden; display:block;
float:none;'>"+ */
                   
"<a href='#'   class='"+dataObj[i].entityId+"'   onclick='showProdInfo(this.className);' style='overflow:hidden; display:block; float:none;text-align:center;'><img  height='150px;' src='"+dataObj[i].thumbnailPath  +"'></a>"+
                 
" <dl style='width: 100%;'> <div style='border:1px solid gray;padding:5px;margin:5px;'> <dt > <a href='#' target='_blank' class='title'>"+dataObj[i].productName +"</a>"+     
                              " <span class='en'>"+dataObj[i].categoryName+ "</span> "+   
                               "<p><spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyPrice'></spring:message><span class='change-price"+dataObj[i].entityId+"'>"+dataObj[i].suppRetailPrice+"</span></p>"+
                               "<p><spring:message code='pm.buyPm.searchForm.supplierInst'></spring:message>:<span>"+dataObj[i].instName +"</span></p>"+
                               "<p><a href='javascript:;' class='buy'  onclick=\"submitOrders('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\")>"+     
                               "<spring:message code='pm.buyPm.searchForm.initPmProductInfo.intro.buyProduct'></spring:message> <a href='javascript:;' class='putToCart'  onclick=\"put2Cart('"+dataObj[i].entityId+"','"+dataObj[i].suppRetailPrice+"');\"><spring:message
code='pm.buyPm.searchForm.initPmProductInfo.intro.putToShoppingCart'></spring:message> </a></p>"+
                       "</dt></div></dl></li>";       
                      $("#itemContainer").append(li);       
                 }    
             }
         }
     });

                     //结束

                     }

                });

                    

              } else {  

              }  

          },  

          error : function(data) {  

          }  

      });  
};

div:

   <div id="container" class="clearfix" style="position:relative; text-align: center;height:auto; width:90%;  margin-left:15px;padding:0 auto;overflow: hidden;">
           <div id="content" class="defaults" style="margin:0 auto; text-align:centre;display: block; overflow: hidden;" >   
<!-- item container -->   
<ul id="itemContainer" style="margin:0 auto;display: block;height:auto; overflow: hidden;width: 100%;">             
</ul>   
</div>
<div style="margin-left: 15px;padding-right:165px;">
       <div class="JqPagination" style="position: relative;margin-top: 18px;margin-left: 15px; padding: 10px; " >
 <a href="#" class="first" data-action="first">«</a>
 <a href="#" class="previous" data-action="previous">‹</a>    
 <input type="text" readonly="readonly" data-max-page="40" />
 <a href="#" class="next" data-action="next">›</a>   
 <a href="#" class="last" data-action="last">»</a>
   </div>
   </div>
</div>
  

注：在这里我修改了css的选择器，因为项目的选择器paganation和这边的pagenation冲突了，所以将名称改为了Jqpagenation

后台自己写一下就可以了