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

 更新时间:2017年06月09日 09:49:43   作者:天马3798  
这篇文章主要介绍了 Bootstrap Table使用整理(五)之分页组合查询的实例代码,非常报错,具有参考借鉴价值,需要的朋友可以参考下

推荐阅读:

Bootstrap Table使用整理(一) https://www.jb51.net/article/115789.htm

Bootstrap Table使用整理(二)  https://www.jb51.net/article/115791.htm

Bootstrap Table使用整理(三)  https://www.jb51.net/article/115795.htm

Bootstrap Table使用整理(四)之工具栏 https://www.jb51.net/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使用整理(五)之分页组合查询,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript如何使用插值实现图像渐变

    JavaScript如何使用插值实现图像渐变

    这篇文章主要介绍了JavaScript如何使用插值实现图像渐变,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • js+html5操作sqlite数据库的方法

    js+html5操作sqlite数据库的方法

    这篇文章主要介绍了js+html5操作sqlite数据库的方法,以完整实例形式分析了JavaScript封装的html5操作SQLite数据库类,并分析了具体使用技巧,需要的朋友可以参考下
    2016-02-02
  • 小程序实现搜索框

    小程序实现搜索框

    搜索框无论是在电商网站还是小程序中都很常见,这篇文章主要就为大家详细介绍了小程序如何实现搜索框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    这篇文章主要介绍了JS表单验证插件之数据与逻辑分离操作,结合实例形式分析了JavaScript基于策略模式实现数据与逻辑分离的表单验证插件相关原理、操作技巧及注意事项,需要的朋友可以参考下
    2020-05-05
  • 原生JavaScript实现的简单放大镜效果示例

    原生JavaScript实现的简单放大镜效果示例

    这篇文章主要介绍了原生JavaScript实现的简单放大镜效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-02-02
  • 微信小程序实现天气预报功能(附源码)

    微信小程序实现天气预报功能(附源码)

    这篇文章主要介绍了微信小程序实现天气预报功能(附源码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序嵌入H5页面(webview)的基本用法和父子传参数详细说明

    微信小程序嵌入H5页面(webview)的基本用法和父子传参数详细说明

    微信小程序中嵌入H5页面通常指的是在小程序中使用Web-view组件来加载外部的网页,下面这篇文章主要给大家介绍了关于微信小程序嵌入H5页面(webview)的基本用法和父子传参数的相关资料,需要的朋友可以参考下
    2024-08-08
  • 利用JS轻松实现获取表单数据

    利用JS轻松实现获取表单数据

    本文主要介绍了利用JS轻松实现获取表单数据。方法有别于原始的做法,大家可以试着找原始做法与本文所说方法之间的区别。有兴趣的朋友可以看下,希望对大家有所帮助
    2016-12-12
  • TypeScript基础入门教程之三重斜线指令详解

    TypeScript基础入门教程之三重斜线指令详解

    这篇文章主要给大家介绍了关于TypeScript基础入门教程之三重斜线指令的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • 详解javascript new的运行机制

    详解javascript new的运行机制

    这篇文章主要介绍了javascript new的运行机制的相关资料,需要的朋友可以参考下
    2016-01-01

最新评论