Bootstrap Table 使用教程基础篇 之 服务器分页

  • A+
所属分类：Bootstrap Table

Bootstrap Table 使用教程基础篇 之 服务器分页

Html

  1. <table id="Table"></table>  

JavaScript

  1. $('#Table').bootstrapTable({  
  2.     toolbar: '#toolbar',//一个jQuery 选择器，指明自定义的toolbar  
  3.     search: true,//是否启用搜索框  
  4.     showRefresh: true,//是否显示 刷新按钮  
  5.     showToggle: true,//是否显示 切换试图（table/card）按钮  
  6.     showColumns: true,//是否显示 内容列下拉框  
  7.     showExport: true,//是否显示导出  
  8.     minimumCountColumns: '2',//当列数小于此值时，将隐藏内容列下拉框。  
  9.     showPaginationSwitch: true,//是否显示 数据条数选择框  
  10.     pagination: true,//设置为 true 会在表格底部显示分页条  
  11.     idField: 'ID',//指定主键列  
  12.     pageList: '[10, 25, 50, 100, ALL]',//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。  
  13.     queryParams: queryParam,//  
  14.     sidePagination: 'server',//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法  
  15.     url: 'SalatyData',//服务器数据的加载地址  
  16.     method: 'get',  
  17.     columns: []  
  18. });  
  19. function queryParam(Params) {  
  20.   var P = {  
  21.      pageSize: Params.limit,  
  22.      offset: Params.offset,  
  23.      sortOrder: Params.order,  
  24.      searchText: search,  
  25.      month:mm  
  26.     };  
  27.     return P;  
  28. }  

Controller

  1. public ActionResult SalatyData(int pageSize, int offset,string sortOrder, string month,string searchText)  
  2. {  
  3.     int total = 0;  
  4.     List<EDSALARY> rows = null;  
  5.     string json = "";  
  6.     total = dbContext.EDSALARY.Count();  
  7.     rows = dbContext.EDSALARY.OrderByDescending(x => x.ED_PAYMONTH).Skip(offset).Take(pageSize).ToList();  
  8.     json = JsonConvert.SerializeObject(new  
  9.     {  
  10.         total = total,  
  11.         rows = rows  
  12.     });  
  13.     return Content(json, "text/json");  
  14. }  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: