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有关的小细节
Apr 02 Javascript
js正确获取元素样式详解
Aug 07 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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的memcached客户端memcached
2011/06/14 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python中字典和集合学习小结
2017/07/07 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
大学生万能检讨书范例
2014/10/04 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS