关于bootstraptable的客户端分页搜索简单使用

最新推荐文章于 2022-09-09 10:54:11 发布

置顶双子的小坏呀

最新推荐文章于 2022-09-09 10:54:11 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41862477/article/details/95180233

本文介绍了Bootstrap Table的使用方法。首先给出官网地址，接着详细说明了引入相关依赖的方式，包括CSS和JS文件。然后讲述创建表格容器，最后展示了如何渲染表格完成客户端分页，还提及了搜索、分页等功能的效果展示。

官网地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

第一步：引入相关依赖，我使用的是链接的方式如果你觉得浪费带宽可以下到本地

<--4.0版本bootstrap开发压缩版min.css-->

<--bootstrap-table开发压缩版min.css-->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css"/>

<--bootstrap-table开发压缩版min.js-->

<--popper开发压缩版min.js，选择每页选择多少条时会用到这个js-->

<--4.0版本bootstrap-table开发压缩版min.js-->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<--bootstrap中文语言包支持-->
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>

第二步：创建表格容器

第三步：渲染表格完成客户端分页

$('#testtable').bootstrapTable({
       method : 'post',
       url : "http://xxx.xxx.x.xx:xxxx/oneMap/car/bootstraptablegetCarposition",//请求路径
       striped : true, //是否显示行间隔色
       pageNumber : 1, //初始化加载第一页
       pagination : true,//是否分页
       sidePagination : 'client',//server:服务器端分页|client：前端分页
       search: true, //是否启用搜索框，此处是前端搜索
       pageSize : 5,//单页记录数
       pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
       columns : [ {
           title : 'id',
           field : 'id',
       }, {
           title : 'motoId',
           field : 'motoId',
       }, {
           title : 'type',
           field : 'type',
       }, {
           title : '车牌号',
           field : 'license',
       }, {
           title : '司机id',
           field : 'driver',
       } , {
           title : 'state',
           field : 'state',
       }, {
           title : 'position',
           field : 'position',
       }, {
           title : 'area',
           field : 'area',
       }, {
           title : 'areaCarid',
           field : 'areaCarid',
       }]
   });