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

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

示例截图：

客户端代码：

//引入的钢性铸铁文件链接href='./public/static/CSS/bootstrap。量滴CSS“rel=”外部no跟随“rel=”样式表/link href='./public/static/CSS/plugins/bootstrap-table/bootstrap-table。量滴CSS“rel=”外部no跟随“rel=”样式表'//引入的射流研究…文件脚本src='http:/public/static/js/jquery。量滴js '/script脚本src=' http :/public/静态/js/bootstrap。量滴js '/script脚本src=' http :/public/static/js/plugins/引导表/引导表。量滴js '/script脚本src=' http :/public/static/js/plugins/bootstrap-table/bootstrap-table-zh-cn。量滴js '/脚本html文件代码

div class=' panel panel-default ' div class=' panel-heading '查询条件/div class=' panel-body form-group ' style=' margin-bottom :0 px；'label class=' col-sm-1 control-label ' style=' text-align : right；页边距-top:5px '姓名：/label div class='col-sm-2 '输入类型=' text ' class=' form-control ' Name=' Name ' id=' search _ Name '/div label class=' col-sm-1 control-label ' style=' text-align : right；页边距-top:5px '手机号：/label div class='col-sm-2 '输入类型=' text ' class=' form-control ' Name=' Name ' id=' search _ tel '/div class=' col-sm-1 col-sm-offset-4 '按钮类=' BTNBTN-初选' id='搜索_ BTN '查询/button/div/div table id=' my tab ' class=' table table-hover '/table div id=' toolbar ' class=' BTN-组拉-右' style=' margin-right : 20px；'button id=' BTN _编辑' type=' button ' class=' BTN BTN-默认' style=' display : none边框半径： 0 ' span class=' glyphicon glyphicon-pencil ' aria-hidden=' true '/span修改/button button id=' BTN _ delete ' type=' button ' class=' BTN BTN-默认' 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 /divjs文件代码：

//根据窗口$ (window)调整桌子高度。resize (function () {$ ('# mytab '))。bootstrap table ('reset view '，{ height : table height()})})//生成用户数据$ ('# mytab ')。引导表({method:' post '，content type : ' application/x-www-form-URL encoded '，//必须有！Url : './index . PHP/admin/index/user management '，//请求数据的文件路径是height:tableHeight()，//高度调整工具栏： '#toolbar '，//指定工具栏striped: true，//是否显示行间距颜色datafield :' RES '，//bootstrap表可以是前端分页也可以是后端分页，这里//我们使用后端分页，后端分页需要返回包含total的记录总数：这个键值好像//row:记录集的键值可以被dataField本身修改和定义为自己想要的页码： 1。//初始化并加载第一页。默认页面分页为3360真。//是否分页查询参数类型：“限制”。//queryparams 3360 queryparams，//参数sidePagination:'server '，//'在请求服务器时传递，//指定服务器端页面大小：10，//单页记录号页面列表：[5，10，20，30]]，//分页步长值showRefresh:true，//刷新按钮showcolumn3360true，单击选择3360 rue，//是否启用单击所选行工具栏3360 {title: '手机号码'，field3360 '电话'，}，{title: '电子邮件'，field: '电子邮件' }，{title: '注册日期'，field :' createtime '，可排序3360 true}，{title : '状态'，field : '属性'，Align: '中心'，//列数据格式化程序：操作格式化程序}]，locale : ' zh-1 } })//三个参数，value表示column函数operate formatter (value，row，index)的值{ if(value==2){ return ' I class=' fa fa-lock ' style=' color : red '/I ' } else if(value==1){ return ' I class=' fa-unlock ' style=' color : green '/I ' } else { return ' data error ' }//参数函数query params(params){ return {//page sizes是多少条数据每页的限制，//哪一页是pageindex :params。页码，名称3360 $ ('# search _ name ')。val()，Tel: $ ('# search _ tel ')。val()} }//查询按钮事件$ ('# search _ BTN ')。单击(function () {$ ('# mytab ')。引导表(' refresh '，{url: '.}) //tableHeight函数tableHeight(){ //可以根据自己的页面进行调整。返回$(窗口)。高度()-280；}传递到后台的数据：

后台数据

只勾选了一项，可以修改和删除

检查多个项目只能删除

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

如果我点击第二页，我将在搜索框中输入搜索条件，点击查询按钮，并调用bootstrap table refresh()方法。页面索引将从第二页开始，应该更改为第一页。大多数在线方法是：

$(“# my tab”)。bootstrapTable('销毁')；必须首先销毁该表，否则将保留最后加载的内容

.//然后重新初始化表，相当于重新创建。

因为觉得太麻烦了，找了很久终于找到了一个简单的解决办法

当您再次单击查询按钮时，

$('#mytab ')。bootstrapTable('refreshOptions '，{pageNumber:1，page size :10 })；//没关系

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

摘要

以上是边肖介绍的引导表插件的服务器端分页示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！