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

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

 

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

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

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

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>

<--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-->

<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<--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>

第二步:创建表格容器

    <table id="testtable" class=" table-striped table-dark">          
    </table>

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

  $('#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',
                }]
            });

效果展示:

搜索展示:

当前显示多少页展示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值