Bootstrap Table 使用教程进阶篇 之 服务器分页搜索

  • A+
所属分类:Bootstrap Table

Bootstrap Table 使用教程进阶篇 之 服务器分页搜索

Html

  1. <div class="fixed-table-toolbar">  
  2.     <div class="pull-right search">  
  3.         <input id="Query" class="form-control input-outline" placeholder="搜索" type="text">  
  4.     </div>  
  5. </div>  
  6. <table id="Table"></table>  

JavaScript

  1. var search = '';  
  2. $('#Query').bind('keydown', function (e) {  
  3.     if (e.keyCode == "13") {  
  4.         search = $('#Query').val();  
  5.         $('#Table').bootstrapTable('refresh', { silent: true, url: 'JsonTable', query: { searchText: search } });  
  6.     }  
  7. });  
  8. $('#Table').bootstrapTable({  
  9.     toolbar: '#toolbar',//一个jQuery 选择器,指明自定义的toolbar  
  10.     toolbarAlign: 'right',  
  11.     minimumCountColumns: '2',//当列数小于此值时,将隐藏内容列下拉框。  
  12.     pagination: true,//设置为 true 会在表格底部显示分页条  
  13.     idField: 'ID',//指定主键列  
  14.     pageList: '[10, 25, 50, 100, ALL]',//如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。  
  15.     queryParams: queryParam,//  
  16.     sidePagination: 'server',//设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法  
  17.     url: 'JsonTable',//服务器数据的加载地址  
  18.     method: 'get',  
  19.     columns: [{  
  20.         checkbox: true,  
  21.     },{  
  22.         field: 'ID',  
  23.         title: '系统ID'  
  24.     }, {  
  25.         field: 'C1',  
  26.         title: ''  
  27.     }]  
  28. });  
  29. function queryParam(Params) {  
  30.     var P = {  
  31.         pageSize: Params.limit,  
  32.         offset: Params.offset,  
  33.         sortOrder: Params.order,  
  34.         searchText: search  
  35.     };  
  36.     return P;  
  37. }  

Controller

  1. public ActionResult JsonTable(int pageSize, int offset, string sortOrder,string searchText) {  
  2.     int total = 0;  
  3.     List<BOOTSTRAPTABLE> rows = null;  
  4.     string json = "";  
  5.     if (searchText != "")  
  6.     {  
  7.         total = db.BOOTSTRAPTABLE.Where(a => a.ID.Contains(searchText) || a.C1.Contains(searchText)).Count();  
  8.         rows = db.BOOTSTRAPTABLE.Where(a => a.ID.Contains(searchText) || a.C1.Contains(searchText)).OrderByDescending(b => b.ID).Skip(offset).Take(pageSize).ToList();  
  9.         json = JsonConvert.SerializeObject(new { total = total, rows = rows });  
  10.     }  
  11.     else {  
  12.         total = db.BOOTSTRAPTABLE.Count();  
  13.         rows = db.BOOTSTRAPTABLE.OrderByDescending(b => b.ID).Skip(offset).Take(pageSize).ToList();  
  14.         json = JsonConvert.SerializeObject(new { total = total, rows = rows });  
  15.     }  
  16.     return Content(json, "text/json");  
  17. }  
钰玺

发表评论

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