Bootstrap分页插件--Bootstrap Paginator---使用方法 -3三个属性(type, page, current))

1.在视图上引入bootstrap.css、bootstrap-pageinator.js、jquery.min.js

<link href="css/bootstrap.css" rel="stylesheet">

2.<script type="text/javascript" src="js/jquery-1.8.1.js"></script>

3.<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

2.在视图的主体部分放两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。

[java] view plain copy

1. <div class="span9">  
2.         <label>信息列表</label>  
3.         <hr />  
4.         <div id="list"></div>  
5.   
6.         <div id="example"></div>  
7.     </div>  

3.分页js的编写

[java] view plain copy

1. <script>  
2.     $(function () {  
3.         var carId = 1;  
4.         $.ajax({  
5.             url: "GetData",  
6.             datatype: 'json',  
7.             type: "Post",  
8.             data: "id=" + carId,  
9.             success: function (data) {  
10.                 if (data != null) {  
11.                     $.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json  
12.                         $("#list").append('<table id="data_table" class="table table-striped">');  
13.                         $("#list").append('<thead>');  
14.                         $("#list").append('<tr>');  
15.                         $("#list").append('<th>Id</th>');  
16.                         $("#list").append('<th>姓名</th>');  
17.                         $("#list").append('<th>年龄</th>');  
18.                         $("#list").append('<th> </th>');  
19.                         $("#list").append('</tr>');  
20.                         $("#list").append('</thead>');  
21.                         $("#list").append('<tbody>');  
22.                         $("#list").append('<tr>');  
23.                         $("#list").append('<td>' + item.Id + '</td>');  
24.                         $("#list").append('<td>' + item.Name + '</td>');  
25.                         $("#list").append('<td>'+item.age+'</td>');  
26.                         $("#list").append('<td>');  
27.                         $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');  
28.                         $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');  
29.                         $("#list").append('</td>');  
30.                         $("#list").append('</tr>');  
31.                         $("#list").append('</tbody>');  
32.   
33.   
34.                         $("#list").append('<tr>');  
35.                         $("#list").append('<td>内容</td>');  
36.                         $("#list").append('<td>' + item.Message + '</td>');  
37.                         $("#list").append('</tr>');  
38.                         $("#list").append('</table>');  
39.                     });  
40.                     var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回数据转成object类型)  
41.                     var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage  
42.                     var options = {  
43.                         bootstrapMajorVersion: 2, //版本  
44.                         currentPage: currentPage, //当前页数  
45.                         totalPages: pageCount, //总页数  
46.                         itemTexts: function (type, page, current) {  
47.                             switch (type) {  
48.                                 case "first":  
49.                                     return "首页";  
50.                                 case "prev":  
51.                                     return "上一页";  
52.                                 case "next":  
53.                                     return "下一页";  
54.                                 case "last":  
55.                                     return "末页";  
56.                                 case "page":  
57.                                     return page;  
58.                             }  
59.                         },//点击事件，用于通过Ajax来刷新整个list列表  
60.                         onPageClicked: function (event, originalEvent, type, page) {  
61.                             $.ajax({  
62.                                 url: "/OA/Setting/GetDate?id=" + page,  
63.                                 type: "Post",  
64.                                 data: "page=" + page,  
65.                                 success: function (data1) {  
66.                                     if (data1 != null) {  
67.                                         $.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json  
68.                                             $("#list").append('<table id="data_table" class="table table-striped">');  
69.                                             $("#list").append('<thead>');  
70.                                             $("#list").append('<tr>');  
71.                                             $("#list").append('<th>Id</th>');  
72.                                             $("#list").append('<th>姓名</th>');  
73.                                             $("#list").append('<th>年龄</th>');  
74.                                             $("#list").append('<th> </th>');  
75.                                             $("#list").append('</tr>');  
76.                                             $("#list").append('</thead>');  
77.                                             $("#list").append('<tbody>');  
78.                                             $("#list").append('<tr>');  
79.                                             $("#list").append('<td>' + item.Id + '</td>');  
80.                                             $("#list").append('<td>' + item.Name + '</td>');  
81.                                             $("#list").append('<td>' + item.age+ '</td>');  
82.                                             $("#list").append('<td>');  
83.                                             $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');  
84.                                             $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');  
85.                                             $("#list").append('</td>');  
86.                                             $("#list").append('</tr>');  
87.                                             $("#list").append('</tbody>');  
88.   
89.   
90.                                             $("#list").append('<tr>');  
91.                                             $("#list").append('<td>内容</td>');  
92.                                             $("#list").append('<td>' + item.Message + '</td>');  
93.                                             $("#list").append('</tr>');  
94.                                             $("#list").append('</table>');  
95.                                         });  
96.                                     }  
97.                                 }  
98.                             });  
99.                         }  
100.                     };  
101.                     $('#example').bootstrapPaginator(options);  
102.                 }  
103.             }  
104.         });  
105.     })  
106. </script>  

4.后台处理请求的方法

[java] view plain copy

1. public String GetDate(int id, int page)  
2.         {  
3.             int pageIndex = page ;//当前页  
4.             const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制  
5.             //获取需要展示的数据  
6.             List<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, Id);  
7.             //得到数据的条数  
8.             int rowCount = list.Count();  
9.             //通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算  
10.             if(rowCount%pageSize!=0)  
11.             {  
12.                 rowCount = rowCount / pageSize + 1;  
13.             }  
14.             else  
15.             {  
16.                 rowCount = rowCount / pageSize;  
17.             }  
18.   
19.   
20.             //转成Json格式  
21.             var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" +                                JsonConvert.SerializeObject(list) + "}";  
22.             return Json(strResult, JsonRequestBehavior.AllowGet);  
23.         }  

5.Paginator组件参数

参数名数据类型默认值描述sizestring"normal"设置控件的显示大小，是个字符串. 允许的值: mini, small, normal,large。值：mini版的、小号的、正常的、大号的。alignmentstring"left"设置控件的对齐方式，是个字符串， 允许的值用： left, center andright. 即：左对齐、居中对齐、右对齐。itemContainerClassfunction 该参数接收一个函数，返回一个字符串，该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时，都会调用该函数，同时把有关该按钮的信息作为参数传入。参数：type,page, current 。type为该控件的操作按钮的类型，如上图所示的五种类型：first、prev、page、next、last。page为该按钮所属第几页。current 指示整个控件的当前页是第几页。currentPagenumber1设置当前页.numberOfPagesnumber5设置控件显示的页码数.即：类型为"page"的操作按钮的数量。totalPagesnumber1设置总页数.pageUrlfunction 实际上，控件内的每个操作按钮最终会被渲染成超链接，该参数的作用就是设置超链接的链接地址。该参数是个函数，参数为：type,page, current。这样我们就可以通过这个函数为每个操作按钮动态设置链接地址。如："http://example.com/list/page/"+pageshouldShowPageboolean/functiontrue该参数用于设置某个操作按钮是否显示，可是个布尔值也可是个函数。当为true时，显示。当为false时，不显示。如果该参数是个函数，需要返回个布尔值，通过这个返回值判断是否显示。函数有3个参数: type, page, current。使用函数的好处是，可以对每个操作按钮进行显示控制。itemTextsfunction 控制每个操作按钮的显示文字。是个函数，有3个参数: type, page, current。通过这个参数我们就可以将操作按钮上的英文改为中文，如first-->首页，last-->尾页。tooltipTitlesfunction 设置操作按钮的title属性。是个函数，有3个参数: type, page, current。useBootstrapTooltipbooleanfalse设置是否使用Bootstrap内置的tooltip。 true是使用，false是不使用,默认是不使用。注意：如果使用，则需要引入bootstrap-tooltip.js插件。bootstrapTooltipOptionsobject 

[javascript] view plain copy

1. Default:  
2. {  
3.     animation: <span class="literal" style="margin:0px; padding:0px">true</span>,  
4.     html: <span class="literal" style="margin:0px; padding:0px">true</span>,  
5.     placement: <span class="string" style="margin:0px; padding:0px; color:rgb(101,176,66)">'top'</span>,  
6.     selector: <span class="literal" style="margin:0px; padding:0px">false</span>,  
7.     title: <span class="string" style="margin:0px; padding:0px; color:rgb(101,176,66)">""</span>,  
8.     container: <span class="literal" style="margin:0px; padding:0px">false</span> }  
9.                   

该参数是个js对象。当参数useBootstrapTooltip为true时，会将该对象传给Bootstrap的bootstrap-tooltip.js插件。

onPageClickedfunction 为操作按钮绑定click事件。回调函数的参数：event, originalEvent, type,page。onPageChangedfunction 为操作按钮绑定页码改变事件，回调函数的参数：event, oldPage, newPage。

公共命令

另外该插件还提供了几个公共的命令，可以通过如下方法调用，如：$('#example').bootstrapPaginator("show",3) 调用show命令、$('#example').bootstrapPaginator("getPages") 调用getPages命令

命令名参数返回值描述showpage show命令用于直接跳转到特定的page，与直接点击操作按钮的效果是一样的。使用方法，如：$('#example').bootstrapPaginator("show",3) 直接跳转到第3页，$('#example').bootstrapPaginator("show",100)直接跳转到100页。 showFirst  showFirst 命令用于直接跳转到首页，与点击first按钮相同。使用方法：$('#example').bootstrapPaginator("showFirst") showPrevious  showPrevious 命令用于直接跳转到上一页。使用方法：$('#example').bootstrapPaginator("showPrevious") showNext  showNext命令用于直接跳转到下一页。showLast  showLast 命令用于直接跳转到上一页。getPages objectgetPages命令用于返回当前控件中显示的页码，以数组形式返回。使用方法：var arra = $('#example').bootstrapPaginator("getPages") setOptionsobject setOptions 命令用于重新设置参数，使用方法：$('#example').bootstrapPaginator("setOptions",newoptions)

事件Events

Bootstrap Paginator 提供了俩个事件：page-clicked和page-changed。这俩个事件作为参数使用，分别对应onPageClicked和onPageChanged。

事件名回调函数描述page-clickedfunction(event, originalEvent, type, page)同上文。另外，参数event, originalEvent是俩个jquery事件对象，可参考jquery相关文档page-changedfunction(event, oldPage, newPage)同上文