bootstraptable学习(2)分页

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

 1 function init() {
 2     $('#bootstrapModel').bootstrapTable({
 3         url: "../Listing.ashx",
 4         contentType: "application/x-www-form-urlencoded",
 5         method: 'post', 
 6         pagination: true,   //是否分页
 7         sidePagination: "server",  //服务器端分页
 8         pageNumber: 1,//初始化加载第一页，默认第一页
 9         pageSize: 5, //页面显示数据条数
10         pageList: [3, 5, 7, 9], //可供选择的页面显示条数
11         queryParamsType: "", //设置为 'limit' 则会发送符合 RESTFul 格式的参数。
12         queryParams: queryParams,
13         
14         columns: [
15             {
16             field: 'ProductID',
17             title: '编号'
18         }, {
19            field: 'Name',
20            title: '产品名称'
21         }, {
22            field: 'Description',
23            title: '描述'
24         }, {
25            field: 'Price',
26             title: '价格'
27         }
28 
29         ]
30     });
31 }
32 
33 function queryParams(params) {
34     return {
35         pageSize: params.pageSize, 
36         pageNumber: params.pageNumber
37     }
38 }

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

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

 1  public void ProcessRequest(HttpContext context)
 2         {
 3 
 4             //context.Response.ContentType = "text/plain";
 5 
 6             int pageNumber =Convert.ToInt32( context.Request["pageNumber"]);
 7             int pageSize =Convert.ToInt32( context.Request["pageSize"]);
 8 
 9             var productList = repo.Products.ToList().
10                 Skip((pageNumber-1)*pageSize).Take(pageSize);
11             var count = repo.Products.ToList().Count();
12 
13             var result = new { total = count, rows = productList };
14             var productListJson =  JsonConvert.SerializeObject(result);
15             context.Response.Write(productListJson);
16     }

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

 

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

 

 1 function init() {
 2     $('#bootstrapModel').bootstrapTable({
 3         url: "../Listing.ashx",
 4         contentType: "application/x-www-form-urlencoded",
 5         method: 'post', 
 6         pagination: true,   //是否分页
 7         sidePagination: "server",  //服务器端分页
 8         pageNumber: 1,//初始化加载第一页，默认第一页
 9         pageSize: 5, //页面显示数据条数
10         pageList: [3, 5, 7, 9], //可供选择的页面显示条数
11         queryParamsType: 'limit', //设置为 'limit' 则会发送符合 RESTFul 格式的参数。
12         queryParams: queryParams,
13         
14         columns: [
15             {
16             field: 'ProductID',
17             title: '编号'
18         }, {
19            field: 'Name',
20            title: '产品名称'
21         }, {
22            field: 'Description',
23            title: '描述'
24         }, {
25            field: 'Price',
26             title: '价格'
27         }
28 
29         ]
30     });
31 }
32 
33 //function queryParams(params) {
34 //    return {
35 //        pageSize: params.pageSize, 
36 //        pageNumber: params.pageNumber
37 //    }
38 //}
39 
40 function queryParams(params) {
41     var temp = {
42         pageSize: params.limit,  //页面有多少条
43         offset: params.offset   //跳过多少条
44     };
45     return temp;
46 }

 

后台相应修改为

 1 public void ProcessRequest(HttpContext context)
 2         {
 3 
 4             //context.Response.ContentType = "text/plain";
 5 
 6             int offset = Convert.ToInt32( context.Request["offset"]);
 7             int pageSize =Convert.ToInt32( context.Request["pageSize"]);
 8 
 9             //var productList = repo.Products.ToList().
10             //    Skip((pageNumber-1)*pageSize).Take(pageSize);
11             var productList = repo.Products.ToList().
12                 Skip(offset).Take(pageSize);
13             var count = repo.Products.ToList().Count();
14 
15             var result = new { total = count, rows = productList };
16             var productListJson =  JsonConvert.SerializeObject(result);
17             context.Response.Write(productListJson);
18     }

 

转载于:https://www.cnblogs.com/Spinoza/p/8909503.html