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

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

因公司的项目需要实现用户管理的表格实现,所以选用了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 refresh()方法,pageIndex会从第二页开始,应该改为第一页
 网上大多数方法为 :

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

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

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

再点击查询按钮时

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

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

总结

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

(0)

相关推荐

  • bootstrap-table实现服务器分页的示例 (spring 后台)

    最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码 前端 首先看下bootstrap table 默认传的分页参数是什么 offset 从哪个下标开始 limit 每页限制的数量 可能跟我们的默认分页参数不大一样吧,所以决定改造一下,传到后台的参数为 page 第几页 从0开始 size 每页显示的数量 $('#' + tableId).bootstrapTable({ queryParams: functio

  • bootstrap table分页模板和获取表中的ID方法

    1.dao层 MyBatis映射 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap"> select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order} </select> mapper.java中 pub

  • Bootstrap table两种分页示例

    Bootstrap table服务器端分页和客户端分页,供大家参考,具体内容如下 服务器端分页 注意服务器端数据的返回的格式 [json]必须包含:total节点(总记录数),rows节点(分页后数据) 即:{"total":24,"rows":[-]} $('#test-table').bootstrapTable({ //请求方法 method: 'get', //是否显示行间隔色 striped: true, //是否使用缓存,默认为true,所以一般情况下需

  • bootstrap table插件的分页与checkbox使用详解

    今天需要实现这样一个功能,有checkbox列表可供选择,要选择不分页之间的行并保存 最终实现的功能如图:(图片来自网上) 具体实现 首先,来看具体的代码,这里只截取实现功能所需代码 var selectionIds =[],selectionNames=[]; var curd = { init:function(){ this._getCheckParam(); }, /** * 初始化 * @private */ /** * 表格操作 */ //表格分页之前处理多选框数据 _respons

  • BootStrap Table前台和后台分页对JSON格式的要求

    Bootstrap是一款前端非常流行的框架,其中的表格更为大家经常使用.大家都知道表格的分页分为前台和后台分页,也就是表格配置中sidePagination属性,当sidePagination: "server"时表示后台分页,sidePagination: "client"为前台分页.前台分页主要适用于数据量不多的情况,当数据量较大时,一般使用后台分页,我们平时在项目中大多数使用后台分页. 近期做项目的时候,同事问了直接改变sidePagination: &quo

  • BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)

    前言 在使用bootstrap table的时候难免会用到分页,分页它提供了两种方式:client客户端分页.server服务端分页两种方式. 在项目中一般是不用client分页的,一般表格数据量大,用client分页会导致缓存爆炸,所以我们选择server分页. 存在即合理,client也是可以用的(数据量特别少的时候),相对于server方式,它的分页序号是自动连续的.而server方式分页的序号就不连续的了(每一页都是从1开始,而不是从上一页的结束序号开始),本文就着重解决这个问题. 原始

  • Bootstrap Table使用整理(五)之分页组合查询

    推荐阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二)  http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三)  http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/1

  • BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

    主要是页码超出范围带来的问题,仅在此记录一下,这里我通过修改bootstrap-table.js的initServer方法中的查询success回调函数解决,将该回调函数改为: function (res) { /**TODO:2016-12-20新加的代码,处理页码错误问题开始*/ if(res.total!=0&&res.rows.length==0){//总记录数大于0,但当前页记录数为0,则此时页码超过了最大页码误 that.options.pageNumber = Math.ce

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

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo

  • BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

  • 值得分享的轻量级Bootstrap Table表格插件

    基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

  • bootstrap table表格插件使用详解

    bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl

  • JS组件Bootstrap Table表格行拖拽效果实现代码

    一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

  • 基于Bootstrap table组件实现多层表头的实例代码

    在做私活的时候,有一个需求是要在页面上实现多层表头.一开始有点懵,不知道怎么来实现,我回想起在JFTT的时候,曾用过Flex版的多层表头,不过那离现在已经很久远了,久远到Flex已经被淘汰出局了.于是在网上折腾了好一会儿,终于找到一款用起来简单,效果又很不错的组件--Bootstrap-table. Bootstrap-table还有很多强大的功能,但这篇文章我们把关注点只放在多层表头上,关注点确定后,这篇博客就很简单了,但我觉得还是很有必要推而广之--因为之前在看董卿主持的<诗词大会>,里面

  • 使用vue和datatables进行表格的服务器端分页实例代码

    想法很简单,用vue生成表格的行,datatables生成分页信息,不想过程曲折,特此记录. datatables端代码: $('#dataTables-example').DataTable({ responsive: true, "serverSide" : true, "ajax": function (data, callback, settings) { postJson( "/AccessControlSystem/user/selectByP

  • bootstrap table表格使用方法详解

    本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapTable({options})显示表格样式. 感觉还是挺漂亮的哈,OK,下面贴代码解释功能. 开始之前,当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <lin

随机推荐