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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
node.js文件上传处理示例
Oct 27 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
一个捕获函数输出的函数
2007/02/14 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP Stream_*系列函数
2010/08/01 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
Yii2单元测试用法示例
2016/11/12 PHP
php数组指针操作详解
2017/02/14 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python 字符串追加实例
2019/07/20 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
银行培训心得体会范文
2016/01/09 职场文书
Python实现Hash算法
2022/03/18 Python