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 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
详解CocosCreator消息分发机制
Apr 16 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 和 MySQL 时区的一点总结
2008/03/26 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
总结js函数相关知识点
2018/02/27 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python处理Excel文件实例代码
2017/06/20 Python
tensorflow更改变量的值实例
2018/07/30 Python
django 读取图片到页面实例
2020/03/27 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
竞聘上岗演讲稿范文
2014/01/10 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
python实现简单的聊天小程序
2021/07/07 Python