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


Posted in Javascript onJune 09, 2017

推荐阅读:

Bootstrap Table使用整理(一) https://3water.com/article/115789.htm

Bootstrap Table使用整理(二)  https://3water.com/article/115791.htm

Bootstrap Table使用整理(三)  https://3water.com/article/115795.htm

Bootstrap Table使用整理(四)之工具栏 https://3water.com/article/115798.htm

一、分页组合查询

/* 
* 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使用整理(五)之分页组合查询

以上所述是小编给大家介绍的Bootstrap Table使用整理(五)之分页组合查询,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
JS实现简易的图片拖拽排序实例代码
Jun 09 #Javascript
jQuery为某个div加入行样式
Jun 09 #jQuery
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 #Javascript
node.js中cluster的使用教程
Jun 09 #Javascript
vue bootstrap小例子一枚
Jun 09 #Javascript
详解webpack解惑:require的五种用法
Jun 09 #Javascript
Bootstrap输入框组件使用详解
Jun 09 #Javascript
You might like
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP小教程之实现链表
2014/06/09 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
党校培训自我鉴定
2014/02/01 职场文书
公证书样本
2014/04/10 职场文书
公司运动会策划方案
2014/05/25 职场文书
团日活动总结报告
2014/06/25 职场文书
十佳青年事迹材料
2014/08/21 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2015年商场工作总结
2015/04/27 职场文书
2015年征兵工作总结
2015/07/23 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android