Bootstrap paginator分页控件实例

 1     <!--分页插件，需额外引用jquery-->
 2     <script src="/Scripts/bootstrap/js/bootstrap-paginator.min.js"></script>
 3 
 4 <script type="text/javascript">
 5 
 6 
 7         $(function () {
 8             getDataList(1);
 9         });
10 
11 
12         /**
13          *
14          * @param pageCurrent 当前所在页
15          * @param pageSum 总页数
16          * @param callback 调用ajax
17          */
18         function setPage(pageCurrent, pageSum, callback) {
19 
20             $(".pagination").bootstrapPaginator({
21                 //设置版本号
22                 bootstrapMajorVersion: 3,
23                 // 显示第几页
24                 currentPage: pageCurrent,
25                 // 总页数
26                 totalPages: pageSum,
27                 //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
28                 onPageClicked: function (event, originalEvent, type, page) {
29                     // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
30                     currentPage = page;
31 
32                     getDataList(page);
33 
34                     callback && callback();
35                 }
36             })
37         }
38 
39 function getDataList(page){
40 
41             $.ajax({
42                 type: "post",
43                 url: "test.ashx",
44                 dataType: "json",
45                 //async:true,
46                 data: {
47                     pageIndex: page,//页数
48                     pageCount: 10,//每页显示的数量
49                 },
50                 success: function (data) {
51                     if (data.IsSucess) {
52                         //toTR自己写的方法用于将数据列表转为tr列表、
53                         $("#tbRemind").html(toTR(data.Datas));
54 
55                         setPage(data.Remark.Page, data.Remark.Sum / (data.Remark.Page * 10));
56                     }
57                     else {
58                         alert(data.Message);
59                     }
60                 },
61                 error: function (XMLHttpRequest, textStatus, errorThrown) {
62                     //alert(XMLHttpRequest.status);
63                     //alert(XMLHttpRequest.readyState);
64                     //alert(textStatus);
65                 },
66             });
67 }
68     </script>