bootstrap table表格插件之服务器端分页实例代码


Posted in Javascript onSeptember 12, 2018

Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台。

 示例截图:

bootstrap table表格插件之服务器端分页实例代码

客户端代码:

//引入的css文件 
<link href="../public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
<link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet">
//引入的js文件
 <script src="../public/static/js/jquery.min.js"></script>
 <script src="../public/static/js/bootstrap.min.js"></script>
 <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
 <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

html文件代码

<div class="panel panel-default">
 <div class="panel-heading">
  查询条件
 </div>
 <div class="panel-body form-group" style="margin-bottom:0px;">
  <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名:</label>
  <div class="col-sm-2">
   <input type="text" class="form-control" name="Name" id="search_name"/>
  </div>
  <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号:</label>
  <div class="col-sm-2">
   <input type="text" class="form-control" name="Name" id="search_tel"/>
  </div>
  <div class="col-sm-1 col-sm-offset-4">
   <button class="btn btn-primary" id="search_btn">查询</button>
  </div>
  </div>
</div>
<table id="mytab" class="table table-hover"></table>
<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
  <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">
   <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
  </button>
  <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">
   <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
  </button>
  <button id="btn_add" type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  </button>
 </div>

js文件代码:

//根据窗口调整表格高度
 $(window).resize(function() {
  $('#mytab').bootstrapTable('resetView', {
   height: tableHeight()
  })
 })
//生成用户数据
 $('#mytab').bootstrapTable({
  method: 'post',
  contentType: "application/x-www-form-urlencoded",//必须要有!!!!
  url:"../index.php/admin/index/userManagement",//要请求数据的文件路径
  height:tableHeight(),//高度调整
  toolbar: '#toolbar',//指定工具栏
  striped: true, //是否显示行间隔色
  dataField: "res",//bootstrap table 可以前端分页也可以后端分页,这里
  //我们使用的是后端分页,后端分页时需返回含有total:总记录数,这个键值好像是固定的 
  //rows: 记录集合 键值可以修改 dataField 自己定义成自己想要的就好
  pageNumber: 1, //初始化加载第一页,默认第一页
  pagination:true,//是否分页
  queryParamsType:'limit',//查询参数组织方式
  queryParams:queryParams,//请求服务器时所传的参数
  sidePagination:'server',//指定服务器端分页
  pageSize:10,//单页记录数
  pageList:[5,10,20,30],//分页步进值
  showRefresh:true,//刷新按钮
  showColumns:true,
  clickToSelect: true,//是否启用点击选中行
  toolbarAlign:'right',工具栏对齐方式
  buttonsAlign:'right',//按钮对齐方式
  toolbar:'#toolbar',//指定工作栏
  columns:[
   {
    title:'全选',
    field:'select',
    //复选框
    checkbox:true,
    width:25,
    align:'center',
    valign:'middle'
   },
   {
    title:'ID',
    field:'ID',
    visible:false
   },
   {
    title:'登录名',
    field:'LoginName',
    sortable:true
   },
   {
    title:'姓名',
    field:'Name',
    sortable:true
   },
   {
    title:'手机号',
    field:'Tel',
   },
   {
    title:'邮箱',
    field:'Email'
   },
   {
    title:'注册日期',
    field:'CreateTime',
    sortable:true
   },
   {
    title:'状态',
    field:'Attribute',
    align:'center',
    //列数据格式化
    formatter:operateFormatter
   }
  ],
  locale:'zh-CN',//中文支持,
  responseHandler:function(res){
   //在ajax获取到数据,渲染表格之前,修改数据源
   return res;
  }
 })
 //三个参数,value代表该列的值
 function operateFormatter(value,row,index){
  if(value==2){
   return '<i class="fa fa-lock" style="color:red"></i>'
  }else if(value==1){
   return '<i class="fa fa-unlock" style="color:green"></i>'
  }else{
   return '数据错误'
  }
 }
 //请求服务数据时所传参数
 function queryParams(params){
  return{
   //每页多少条数据
   pageSize: params.limit,
   //请求第几页
   pageIndex:params.pageNumber,
   Name:$('#search_name').val(),
   Tel:$('#search_tel').val()
  }
 }
  //查询按钮事件
 $('#search_btn').click(function(){
  $('#mytab').bootstrapTable('refresh', {url: '../index.php/admin/index/userManagement'});
 })
 //tableHeight函数
 function tableHeight(){
  //可以根据自己页面情况进行调整
  return $(window).height() -280;
 }

传入后台的数据:

bootstrap table表格插件之服务器端分页实例代码

后台传来的数据

bootstrap table表格插件之服务器端分页实例代码

只勾选一项,可以修改删除

bootstrap table表格插件之服务器端分页实例代码

勾选多项只能删除

bootstrap table表格插件之服务器端分页实例代码

开发过程中遇到的问题 (分页后重新搜素问题)

 如果点击到第二页,我再搜索框中输入搜索条件,点击查询按钮,调用bootstrap table refresh()方法,pageIndex会从第二页开始,应该改为第一页
 网上大多数方法为 :

$(“#mytab”).bootstrapTable(‘destroy');先要将table销毁,否则会保留上次加载的内容

……//然后重新初使化表格,相当于重新创建。

因为感觉太过麻烦,所以找了很久终于找到了简单的解决方法

 再点击查询按钮时

$(‘#mytab').bootstrapTable(‘refreshOptions',{pageNumber:1,pageSize:10});//便可以了

代码地址:https://github.com/hanxue10180/bootstrapTable

总结

以上所述是小编给大家介绍的bootstrap table表格插件之服务器端分页实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 #Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 #Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 #Javascript
Vue.js 十五分钟入门图文教程
Sep 12 #Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
You might like
很好用的PHP数据库类
2009/05/27 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
js 学习笔记(三)
2009/12/29 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
js继承实现方法详解
2016/12/16 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
在python中bool函数的取值方法
2018/11/01 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
毕业生学校组织意见
2015/06/04 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript