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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Ajax实现异步加载数据
Nov 17 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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/05/09 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
js实现消息滚动效果
2017/01/18 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
详解Python装饰器
2019/03/25 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
妇女干部培训方案
2014/05/12 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2015年电教工作总结
2015/05/26 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
个人合作协议范本
2015/08/06 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
求职自我评价参考范文
2019/05/16 职场文书