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 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
Vue 组件注册全解析
Dec 17 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
ASP Json Parser修正版
2009/12/06 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python3爬取各类天气信息
2018/02/24 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
《童年的发现》教学反思
2014/02/14 职场文书
项目投资建议书
2014/05/16 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers