关于Ajax的分页的方法与工具类

	   public void SelectProductType(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
	    		ProductTypeService productTypeService=(ProductTypeService )ObjectFactory.getObject("productTypeService");
	    		//上面获取proxy层的类，下面用到这个类的方法
	    		//PageHelper.startPage(Integer.parseInt(pageNo), 3);
	    		response.setContentType(Constant.CONTENT_TYPE);
	    		String pageNoStr=request.getParameter("pageNo");
	    		String pageSizeStr=request.getParameter("pageSize");
	    		int pageNo=Integer.parseInt(pageNoStr);
	    		int pageSize=Integer.parseInt(pageSizeStr);
	    		Page<Object> page =  PageHelper.startPage(pageNo,pageSize);
	    		List<ProductType> product=productTypeService.findAllType();
	    		PageInfo<ProductType> pageInfo = new PageInfo<ProductType>(product);
	    		response.getWriter().print(JSON.toJSONString(pageInfo));
	    } 

这里获取pageNo，pageSize分别为起始页与每页几个
利用工具PageHelper来设置，利用其中的 pageInfo，将搜查的结果集返回到页面上，最够以Json的形式发给Ajax获取
jsp页面

	
	  function isEmpty(val) {
	            if (val == null || val == '' || val.typeOf == 'undefined') {
	                return true;
	            }
	            return false;
	        }
	        /*发送ajax请求获取数据*/
	        function loadData(pageNo, pageSize) {
	            pageNo = !isEmpty(pageNo) && !isNaN(pageNo) && pageNo > 0 ? pageNo : 1;
	            pageSize = !isEmpty(pageSize) && !isNaN(pageSize) && pageSize > 0 ? pageSize :5;
	    
	            $.ajax({
	                url: '${pageContext.request.contextPath}/sysuser/ProducTypetList.do',
	                type: 'post',
	                data : {"pageNo":pageNo,"pageSize":pageSize},
	                dataType:'json',
	                success: function(data){
	                    var pageNo = data.pageNum;
	                    var totalPage = data.pages;
	                    var list = {
	                        pruductTypes: data.list
	                    };
	                    var html = template('data-template', list);/利用template包list集合写入属性为data-template的javascript中,然后以HTML的形式写入id为data-box的tbody中
	                    $('#data-box').html(html)
	    
	                    // 数据加载完成后进行分页器的初始化
	                    initPaginator(pageNo, totalPage);
	                }
	            });
	    
	            
	        }
	    
	       //初始化分页器
	        function initPaginator(pageNo, totalPage) {
	            // jqueryPage插件
	            $('.tcdPageCode').createPage({
	                current: pageNo,
	                pageCount: totalPage,
	                backFn: function(p) {
	                    loadData(p, '');
	                }
	            });
	    
	        }
	    
	        $(function() {
	            loadData('${pageNo}');
	        });

再用工具的时候要导包

	      <script type="text/javascript" src="${pageContext.request.contextPath}/js/template-web.js"></script>
	               	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
	            <!-- jqueryPage -->
	            <script type="text/javascript" src="${pageContext.request.contextPath}/js/jqueryPage.js"></script>
	            <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jqueryPage.css">

然后获取的值从页面中输出注意：这中写法的格式{{ }}输出的语句

	    <tbody id="data-box">
	                <script type="text/html" id="data-template">
	                {{each pruductTypes  as pro index}}<!--将pruductTypes以pro的形式遍历pruductTypes中的数据-->
	    <tr>
	                <td>{{pro.productTypeId}}</td>         
	    			<td>{{pro.productTypeName}}</td>
	                <td> {{if pro.productTypeState==1}}启用{{else}}禁用{{/if}} </td>
	                <!--{{语法}}括号外呈现页面的语句-->
	    			<td>
	    		  					<a class="btn btn-primary  btn-xs btn-warning" 
	    		  					 href="javascript:;" onclick="modify('{{pro.productTypeName}}','{{pro.productTypeId}}')">
	    		  						  修改
	    		  						<span class="glyphicon glyphicon-pencil"></span>
	    		  					</a>
	    		  					<a class="btn btn-primary btn-xs btn-danger" href="javascript:;" onclick="changeStatus('111','0')">
	    		  						禁用
	    		  						<span class="glyphicon glyphicon-remove"></span>
	    		  					</a>
	    		  	</td>
	    </tr>
	    		{{/each}}
	                </script>
	                 </tbody>
	    	  		   <div class="tcdPageCode"></div><!--工具中的分页插件放的位置，根据类选择器来定义-->```