bootstraptable学习(2)分页

1.分页需要配置一些参数

 function init() {
     $('#bootstrapModel').bootstrapTable({
         url: "../Listing.ashx",
         contentType: "application/x-www-form-urlencoded",
         method: 'post',
         pagination: true,   //是否分页
         sidePagination: "server",  //服务器端分页
         pageNumber: 1,//初始化加载第一页，默认第一页
         pageSize: 5, //页面显示数据条数
         pageList: [3, 5, 7, 9], //可供选择的页面显示条数
         queryParamsType: "", //设置为 'limit' 则会发送符合 RESTFul 格式的参数。
         queryParams: queryParams,

         columns: [
             {
             field: 'ProductID',
             title: '编号'
         }, {
            field: 'Name',
            title: '产品名称'
         }, {
            field: 'Description',
            title: '描述'
         }, {
            field: 'Price',
             title: '价格'
         }

         ]
     });
 }

 function queryParams(params) {
     return {
         pageSize: params.pageSize,
         pageNumber: params.pageNumber
     }
 }

2.可以看到bootstraptable需要我们提供2个重要的参数,一个是pageSize,一个是pageNumber,而这两个值在参数params中能够直接取到,下面是官方api

3.但是还有一个totalCount需要后台的json传递给bootstraptable,下面是后台封装json的方法

  public void ProcessRequest(HttpContext context)
         {

             //context.Response.ContentType = "text/plain";

             int pageNumber =Convert.ToInt32( context.Request["pageNumber"]);
             int pageSize =Convert.ToInt32( context.Request["pageSize"]);

             var productList = repo.Products.ToList().
                 Skip((pageNumber-)*pageSize).Take(pageSize);
             var count = repo.Products.ToList().Count();

             var result = new { total = count, rows = productList };
             var productListJson =  JsonConvert.SerializeObject(result);
             context.Response.Write(productListJson);
     }

完成以上步骤的话应该就没什么问题了

4.如果queryParamsType设置为'limit'的话,表示需要传递一个offset偏移量,就是跳过多少条,是bootstraptable帮我们计算好了的,相当于(pageNumber-1)*pageSize

 function init() {
     $('#bootstrapModel').bootstrapTable({
         url: "../Listing.ashx",
         contentType: "application/x-www-form-urlencoded",
         method: 'post',
         pagination: true,   //是否分页
         sidePagination: "server",  //服务器端分页
         pageNumber: 1,//初始化加载第一页，默认第一页
         pageSize: 5, //页面显示数据条数
         pageList: [3, 5, 7, 9], //可供选择的页面显示条数
         queryParamsType: 'limit', //设置为 'limit' 则会发送符合 RESTFul 格式的参数。
         queryParams: queryParams,

         columns: [
             {
             field: 'ProductID',
             title: '编号'
         }, {
            field: 'Name',
            title: '产品名称'
         }, {
            field: 'Description',
            title: '描述'
         }, {
            field: 'Price',
             title: '价格'
         }

         ]
     });
 }

 //function queryParams(params) {
 //    return {
 //        pageSize: params.pageSize,
 //        pageNumber: params.pageNumber
 //    }
 //}

 function queryParams(params) {
     var temp = {
         pageSize: params.limit,  //页面有多少条
         offset: params.offset   //跳过多少条
     };
     return temp;
 }

后台相应修改为

 public void ProcessRequest(HttpContext context)
         {

             //context.Response.ContentType = "text/plain";

             int offset = Convert.ToInt32( context.Request["offset"]);
             int pageSize =Convert.ToInt32( context.Request["pageSize"]);

             //var productList = repo.Products.ToList().
             //    Skip((pageNumber-1)*pageSize).Take(pageSize);
             var productList = repo.Products.ToList().
                 Skip(offset).Take(pageSize);
             var count = repo.Products.ToList().Count();

             var result = new { total = count, rows = productList };
             var productListJson =  JsonConvert.SerializeObject(result);
             context.Response.Write(productListJson);
     }