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

最新推荐文章于 2024-08-17 01:00:00 发布

hanxue_tyc

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量6w

点赞数 20

文章标签： bootstrap

本文链接：https://blog.csdn.net/hanxue_tyc/article/details/54917227

版权

本文介绍了如何使用Bootstrap Table这个轻量级的表格插件实现服务器端分页功能。在实际项目中，作者通过配置实现了动态获取后台数据并显示在前端的功能。文章中还提到了在分页后进行搜索时遇到的问题，即分页后搜索，pageIndex会从当前页开始，而不是从第一页。作者分享了一个简单的解决方案，通过`refreshOptions`方法设置pageNumber为1来解决此问题。

摘要由CSDN通过智能技术生成

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

Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。
因公司的项目需要实现用户管理的表格实现，所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台。
示例截图：
这里写图片描述

客户端代码：

 //引入的css文件  
<link href="../public/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" 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>
        <