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 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
Javascript浅谈之this
Dec 17 Javascript
javascript自定义的addClass()方法
May 28 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
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
smarty基础之拼接字符串的详解
2013/06/18 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
nodejs读取memcache示例分享
2014/01/02 NodeJs
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
三月学雷锋月活动总结
2014/04/28 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
python爬虫selenium模块详解
2021/03/30 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL