bootstrap Table服务端处理分页(后台是.net)


Posted in Javascript onOctober 19, 2017

本文实例为大家分享了bootstrap Table服务端处理分页的具体代码,供大家参考,具体内容如下

要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来

function HQCreatTables(ob) {
 var option = {
 method: 'get',
 dataType: "json",
 striped: true,//设置为 true 会有隔行变色效果 
 undefinedText: "空",//当数据为 undefined 时显示的字符 
 pagination: true, //分页 
 // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。 
 showToggle: false,//是否显示 切换试图(table/card)按钮 
 showColumns: false,//是否显示 内容列下拉框 
 pageNumber: 1,//如果设置了分页,首页页码 
 // showPaginationSwitch:true,//是否显示 数据条数选择框 
 pageSize: 10,//如果设置了分页,页面数据条数 
 pageList: [10, 20, 40], //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。 
 paginationPreText: '?',//指定分页条中上一页按钮的图标或文字,这里是< 
 paginationNextText: '?',//指定分页条中下一页按钮的图标或文字,这里是> 
 // singleSelect: false,//设置True 将禁止多选 
 search: false, //显示搜索框 
 data_local: "zh-US",//表格汉化 
 sidePagination: "server", //服务端处理分页 
 queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的 
  return {//这里的params是table提供的 
  cp: params.offset,//从数据库第几条记录开始 
  ps: params.limit//找多少条 
  };
 }
 }
 if (ob.url) {
 option.url = ob.url;
 }
 if (ob.columns) {
 option.columns = ob.columns;
 }
 $(ob.id).bootstrapTable('destroy');
 $(ob.id).bootstrapTable(option);
 if (ob.data) {
 $(ob.id).bootstrapTable('load', ob.data);
 }
 $(ob.id).on('load-success.bs.table', function (data) {//table加载成功后的监听函数 
 var $table = $(ob.id);
 var allTableData = JSON.stringify($table.bootstrapTable('getData'));//获取表格的所有内容行
 var obj = JSON.parse(allTableData);
 console.log(obj)
 Xstate.TableArr = obj;
 });
}

table加载成功写的函数,是因为我自己需要才写的。把table里的数据放在全局变量后,查询详细信息就不用再做ajax。
这个'load-success.bs.table'api我还有个问题,当这个table被多次load-success,这个函数就会被运行相同多次,对页面显示功能无影响。但自己还并不明白之前的table被$(ob.id).bootstrapTable('destroy')销毁了,为什么还会被记入。
函数被调用的时候写入自己的参数,colums是第一行表头。

var tab = { id: '#Table', url: '/HealthRecords/Selects', columns: columns }
HQCreatTables(tab);

.net的后台传的json也一定要有page值,rows是你的显示data,total:所有显示数据的条数。

[HttpGet]
 //GET: HealthRecords
 public JsonResult Selects(HealthRecordView m, int cp = -4, int ps = -5, string start = null, string end = null)
 {
  string sa = Session["hid"].ToString();
  m.hid = sa;
  string sqls = " SELECT * from A where hid='" + m.hid + "' ";
  string sqlss = " SELECT count(*) from A where hid='" + m.hid + "' ";
  if (!string.IsNullOrWhiteSpace(m.Name))
  {
  sqls += " and Name like '%" + m.Name + "%'";
  sqlss += " and Name like '%" + m.Name + "%'";
  }
  if (!string.IsNullOrWhiteSpace(start) && !string.IsNullOrWhiteSpace(end))
  {
  sqls += " and r_time > '" + start + "' and r_time <'" + end + "'";
  sqlss += " and r_time > '" + start + "' and r_time <'" + end + "'";
  }
  sqls += " order by r_time desc ";
  if (cp != -4&& ps != -5)
  {
  sqls += " limit "+ cp + "," + ps + " ";
  }
  
  var arr = db.Database.SqlQuery<HealthRecordView>(sqls).ToArray();
  int RoleNames = db.Database.SqlQuery<int>(sqlss).FirstOrDefault();
  return Json(new { page = cp, rows = arr, total = RoleNames }, JsonRequestBehavior.AllowGet);
 }

如上,一次生成不要传对后台数据不要限制更多条件的table已经生成了
如何当你有查询条件的时候,应该怎么做?

bootstrap Table服务端处理分页(后台是.net)

当你看都到图片的时候,你就明白了,只需要在调用函数的时候,在url里增加你的查询条件。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 #Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 #Javascript
微信小程序组件之srcoll-view的详解
Oct 19 #Javascript
JS实现点击循环切换显示内容的方法
Oct 19 #Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 #Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 #Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
javascript中对对层的控制
2006/12/29 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
详解javascript遍历方式
2015/11/11 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python实现名片管理系统项目
2019/04/26 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
污水处理保证书
2015/05/09 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python