Bootstrap Paginator 分页插件使用示例

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

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

2、首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这个我没有亲自去测试看过。于是视图的文件引用便：

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

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

<script>
  $(function () {
    var carId = 1;
    $.ajax({
      url: "/OA/Setting/GetDate",
      datatype: 'json',
      type: "Post",
      data: "id=" + carId,
      success: function (data) {
        if (data != null) {
          $.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json
            $("#list").append('<table id="data_table" class="table table-striped">');
            $("#list").append('<thead>');
            $("#list").append('<tr>');
            $("#list").append('<th>Id</th>');
            $("#list").append('<th>部门名称</th>');
            $("#list").append('<th>备注</th>');
            $("#list").append('<th> </th>');
            $("#list").append('</tr>');
            $("#list").append('</thead>');
            $("#list").append('<tbody>');
            $("#list").append('<tr>');
            $("#list").append('<td>' + item.Id + '</td>');
            $("#list").append('<td>' + item.Name + '</td>');
            $("#list").append('<td>备注</td>');
            $("#list").append('<td>');
            $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
            $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
            $("#list").append('</td>');
            $("#list").append('</tr>');
            $("#list").append('</tbody>');

            $("#list").append('<tr>');
            $("#list").append('<td>内容</td>');
            $("#list").append('<td>' + item.Message + '</td>');
            $("#list").append('</tr>');
            $("#list").append('</table>');
          });
          var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回数据转成object类型)
          var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage
          var options = {
            bootstrapMajorVersion: 2, //版本
            currentPage: currentPage, //当前页数
            totalPages: pageCount, //总页数
            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: "/OA/Setting/GetDate?id=" + page,
                type: "Post",
                data: "page=" + page,
                success: function (data1) {
                  if (data1 != null) {
                    $.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json
                      $("#list").append('<table id="data_table" class="table table-striped">');
                      $("#list").append('<thead>');
                      $("#list").append('<tr>');
                      $("#list").append('<th>Id</th>');
                      $("#list").append('<th>部门名称</th>');
                      $("#list").append('<th>备注</th>');
                      $("#list").append('<th> </th>');
                      $("#list").append('</tr>');
                      $("#list").append('</thead>');
                      $("#list").append('<tbody>');
                      $("#list").append('<tr>');
                      $("#list").append('<td>' + item.Id + '</td>');
                      $("#list").append('<td>' + item.Name + '</td>');
                      $("#list").append('<td>备注</td>');
                      $("#list").append('<td>');
                      $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
                      $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');
                      $("#list").append('</td>');
                      $("#list").append('</tr>');
                      $("#list").append('</tbody>');

                      $("#list").append('<tr>');
                      $("#list").append('<td>内容</td>');
                      $("#list").append('<td>' + item.Message + '</td>');
                      $("#list").append('</tr>');
                      $("#list").append('</table>');
                    });
                  }
                }
              });
            }
          };
          $('#example').bootstrapPaginator(options);
        }
      }
    });
  })
</script>

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

<div class="span9">
        <label>部门列表</label>
        <hr />
        <div id="list"></div>

        <div id="example"></div>
    </div>

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

public ActionResult GetDate(int id, int? page)
    {
      int pageIndex = page ?? 1;//当前页
      const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
      //获取需要展示的部门数据
      IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id);
      //得到数据的条数
      int rowCount = list.Count();
      //通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算
      if(rowCount%pageSize!=0)
      {
        rowCount = rowCount / pageSize + 1;
      }
      else
      {
        rowCount = rowCount / pageSize;
      }

      //转成Json格式
      var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "}";
      return Json(strResult, JsonRequestBehavior.AllowGet);
    }

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

最后显示的效果如下图：

转载于:https://my.oschina.net/dyi/blog/361610