Go语言视频零基础入门到精通

admin

最近做的asp.netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风格便能够统一，又不用自己去写一套分页的功能。
首先便是要下载Bootstrap Paginator了，github上便有这个的开源项目提供下载：
https://github.com/lyonlai/bootstrap-paginator
首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这个我没有亲自去测试看过。于是视图的文件引用便：

1. <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>

复制代码

然后，分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们，当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页，这次也应该有点不同。
  

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

复制代码

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

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

复制代码

而后台这个GetDate的方法就像下面这样：

1. public ActionResult GetDate(int id, int? page)
2.         {
3.             int pageIndex = page ?? 1;//当前页
4.             const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
5.             //获取需要展示的部门数据
6.             IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.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.             }
19.             //转成Json格式
20.             var strResult = "{"pageCount":"+rowCount+","CurrentPage":"+pageIndex+","list":" + JsonConvert.SerializeObject(list) + "}";
21.             return Json(strResult, JsonRequestBehavior.AllowGet);
22.         }

复制代码

这个方法还是有点缺陷的，可以写的更加完美，就好像上面那个pageSize这个可以通过读取配置文件web.config来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。
最后显示的效果如下图：

总结：
尽管内容不多，但是这个的确花了我不少时间，主要是bootstrap的这个插件的开发文档找了好久都找不到，不像之前EasyUI那样文件比较多，而且例子在文档中也比较详细了，xmfdsh我正打算找个时间来总结下自己写的一套分页的做法，那样就不用仅仅拘束于这些写好的框架。