Bootstrap3的paginator分页插件示例-博客-最代码

首页>博客>Bootstrap3的paginator分页插件示例

玫瑰巷的乞者 2016-11-11 16:58:25

Bootstrap3的paginator分页插件示例

最近在弄这个，自己做的范例，所以分享下，也记录下心得。

首先要下载Bootstrap Paginator了，github上便有这个的开源项目提供下载：

https://github.com/lyonlai/bootstrap-paginator

下载的时候要注意里面的结构，其中有2个版本的bootstrap，下载后可以去找后缀“3v”的js文件和样式。

jquery版本要1.8以上，其实官方文档中这样写，我也没试过。

主要操作：2个jsp页面，一个后台类，测试数据表自己新建。

PageTest.jsp:

然后要引入需要的js和css:

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrapv3.css" rel="stylesheet">

  <body>
       <div>
                <div>
			<table class="table table-striped"  id='testTable' ></table>
		</div>
		<div style="text-align:right;">
			<ul id="example"></ul>
	        </div>
     </div>
  </body>

<script type="text/javascript">
		
		//ajax获取后台数据
		function initTable() {
		
		    var tbody="";
		    
			$.ajax({  
		   		type: 'POST',  
		   		dataType : "json",
		   		async:false,
		   		url: "table.jsp",//请求的action路径页面
			   	data: {"flag":true},  
		   		error: function () {//请求失败处理函数  
		       		alert('请求失败');  
		   		},
		   		success:function(data){ //请求成功后处理函数。  
		       		 
		       		 tbody="<tr class='success'><th>设备标识号</td><th  align='center'>设备类别</td><th  align='center'>参数编码</td><th  align='center'>失效模式编码</td><th  align='center'>数据来源</td></tr>";
		       		 
		       		 $.each(data.list, function(i, n) {
                          var trs = "";
                          trs += "<tr><td align='center'>" + n.sbbsh + "</td><td align='center'>"+n.sblb+"</td><td align='center'>"+n.csbm+"</td><td align='center'>"+n.sxcode+"</td><td align='center'>"+n.sjly+"</td></tr>";
                      	  tbody+=trs; 
                     });
                     $("#testTable").html(tbody);  
                     
                     var pageCount = data.pageCount; //取到pageCount的值
					 var currentPage = data.CurrentPage; //得到currentPage
					 
					 var options = {
						bootstrapMajorVersion: 3, //版本
						currentPage: currentPage, //当前页数
						totalPages: pageCount, //总页数
						numberOfPages: 5,
						itemTexts: function (type, page, current) {
							switch (type) {
								case "first":
									return "首页";
								case "prev":
									return "上一页";
								case "next":
									return "下一页";
								case "last":
									return "末页";
								case "page":
									return page;
							}
						},//点击事件，用于通过Ajax来刷新整个list列表
						onPageClicked: function (event, originalEvent, type, page) {
							$.ajax({
								url: "table.jsp",
								type: "Post",
								dataType : "json",
								data: "page=" + page,
								success: function (data) {
								     tbody1="<tr class='success'><th>设备标识号</td><th  align='center'>设备类别</td><th  align='center'>参数编码</td><th  align='center'>失效模式编码</td><th  align='center'>数据来源</td></tr>";
								     
									 $.each(data.list, function(i, n) {
										 var trs = "";
				                          trs += "<tr><td align='center'>" + n.sbbsh + "</td><td align='center'>"+n.sblb+"</td><td align='center'>"+n.csbm+"</td><td align='center'>"+n.sxcode+"</td><td align='center'>"+n.sjly+"</td></tr>";
				                      	  tbody1+=trs; 
				                     });
				                     $("#testTable").html(tbody1);
								}
							});
						}
					};
					$('#example').bootstrapPaginator(options);
		   		}  
			});   				
		}

		$(document).ready(function(){
			initTable();
		});
		
  </script>

table.jsp页面：

<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.demo.DemoAction"%>
<%

String json="";//回传的Json
int pagecount=1;

if(request.getParameter("flag")!=null){
	
	json = DemoAction.creatTable(pagecount);
	
	System.out.println("初始:" + json);
}else{
        pagecount=Integer.parseInt(request.getParameter("page"));

	json =DemoAction.creatTable(pagecount);

	System.out.println("刷新:" + json);
}

out.println(json);

%>

DemoAction主体方法：

package com.demo;


import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;


public class DemoAction{
	
    public static String creatTable(int page){
    	 int pageIndex =  page;//当前页
         int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
         int rowCount = 0 ;
    	 JSONArray  json=null;//初始化数据
           List<Demo> list_demo=new ArrayList<Demo>()；
try {



        	int count=10;//获取测试表里面总条数,这里需要自己去获取
        	
        	rowCount = count;//总条数
      		//通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算
      		if(rowCount%pageSize!=0)
      		{
      			rowCount = rowCount / pageSize + 1;
      		}
      		else
      		{
      			rowCount = rowCount / pageSize;
      		}

        	
        } catch (Exception e) {
			// TODO: handle exception
	}
      
        
        //转成Json格式,这里Demo_list转成对象转Json如果错误，自己去找，这个很简单。 
	String json_data = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JSONArray.fromObject( list_demo) + "}";
   

        return json_data;
    	
    }

}

接下就可以去测试了。

效果图：

总结：

代码的质量不要在意，各位可以去优化，哈哈。测试的过程中，如果出现小问题，可能就是我剔除本身项目代码元素带来小错误，基本不会造成什么影响。另外，再说一遍，需要注意的事，bootstrap版本一定要正确,因为如果是2.x，可能定义主体的时候要用div,3.x的话ul去定义主体。希望小弟的分享能给大家带来帮助，哈哈！

打赏

2个评论