当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Bootstrap Table使用整理(五)之分页组合查询

Bootstrap Table使用整理(五)之分页组合查询

2017年12月12日  | 移动技术网IT编程  | 我要评论

推荐阅读：

bootstrap table使用整理(一)

bootstrap table使用整理(二) 

bootstrap table使用整理（三） 

bootstrap table使用整理（四）之工具栏

一、分页组合查询

/* 
* data-pagination 指定是否启用分页 
* data-page-list 指定分页的页数据量数组 '[5,10]' 
* data-side-pagination 指定分页是否是服务端(server)/客户端(client) 
* 特别说明： 
* 客户端，请求参数： 
* search:文本框内容，在文本框内容改变是自动提交请求 
* order: 排序方式 
* sort:排序列名 
* offset:划过条数 
* limit:要获取的数据的条数 
* 
*/ 
var $table1= $('#table1').bootstraptable({ 
 columns: [ 
  { field: 'sno', title: '学生编号',sortable:true }, 
  { field: 'sname', title: '学生姓名' }, 
  { field: 'ssex', title: '性别' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '课程编号' }, 
 ], 
 url: '@url.action("getstulist", "dataone")', 
 pagination: true, 
 sidepagination: 'server', 
 pagelist:[5,10,20,50], 
 queryparams: function (params) { 
  params.name = '张三丰'; 
  //特别说明，返回的参数的值为空，则当前参数不会发送到服务器端 
  //这种指定请求参数的方式和datatables控价类似 
  params.sex = $('input[name="sex"]:checked').val(); 
  return params; 
 } 
}); 
//刷新方法 
$('#heartbtn').click(function () { 
 $table1.bootstraptable('refresh'); 
}); 
[html] view plain copy print?
<table id="table1" 
  data-classes="table table-hover " 
  data-search="true" 
  data-show-refresh="true" 
  data-show-toggle="true" 
  data-show-columns="true" 
  data-toolbar="#toolbar"></table> 
<div id="toolbar"> 
 <div class="btn-group"> 
  <button class="btn btn-default"> 
   <i class="glyphicon glyphicon-plus"></i> 
  </button> 
  <button class="btn btn-default"> 
   <i class="glyphicon glyphicon-heart" id="heartbtn"></i> 
  </button> 
  <button class="btn btn-default"> 
   <i class="glyphicon glyphicon-trash"></i> 
  </button> 
 </div> 
 <div class="form-group"> 
  <label class="control-label">性别：</label> 
  <label class="radio-inline"> 
   <input type="radio" name="sex" value="男" /> 男 
  </label> 
  <label class="radio-inline"> 
   <input type="radio" name="sex" value="女" /> 女 
  </label> 
 </div> 
</div>

2.服务端代码处理

public jsonresult getstulist(string sex, string search, string sort, string order, int offset, int limit) 
{ 
 var query = _context.student.asqueryable(); 
 if (string.isnullorempty(sex) == false) 
  query = query.where(q => q.ssex == sex); 
 if (string.isnullorempty(search) == false) 
  query = query.where(q => q.sno.contains(search) || q.sname.contains(search)); 
 //排序 
 if (sort == "sno") 
 { 
  if (order == "asc") 
   query = query.orderby(q => q.sno); 
  else 
   query = query.orderbydescending(q => q.sno); 
 } 
 else 
  query = query.orderby(q => q.sbirthday); 
 int total = query.count(); 
 var list = query.skip(offset).take(limit).tolist(); 
 return json(new 
 { 
  rows = list, 
  total = total 
 }); 
}

以上所述是小编给大家介绍的bootstrap table使用整理(五)之分页组合查询，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网