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 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jquery提示效果实例分析
Nov 25 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
Java 生成随机字符的示例代码
Jan 13 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输出数组中重名的元素的几种处理方法
2012/09/05 PHP
CI框架常用函数封装实例
2016/11/21 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
js给selected添加options的方法
2015/05/06 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
原生python实现knn分类算法
2019/10/24 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
保证书范文大全
2014/04/28 职场文书
会计系毕业求职信
2014/08/07 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
python数字图像处理:图像的绘制
2022/06/28 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang