利用bootstarp-table实现ajax分页表格

最新推荐文章于 2021-06-08 09:45:18 发布

ym_diver

最新推荐文章于 2021-06-08 09:45:18 发布

阅读量2.1k

点赞数 1

分类专栏： php 文章标签： php JQuery bootstarp-table ajax 分页

本文链接：https://blog.csdn.net/ym_diver/article/details/78715479

版权

本文介绍了如何利用bootstrap-table插件结合PHP和jQuery创建美观的AJAX分页表格。首先，需要引入相关插件，然后在HTML中定义表格结构。接着，通过JavaScript初始化table，前端工作完成后，只需在服务器端编写逻辑，返回符合要求的数据结构{'total': '1000', 'rows': '[......]'}。" 133207952,554781,储能电池管理系统关键功能解析,"['电池技术', '能源管理', '电力系统', '通信技术', '储能系统']

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

TP5分页很好用，但是样式比较简陋，最近发现了bootstarp-table用来做ajax分页表格挺好的，在这里把方法Mark一下。

首先引入插件,这里不多说，然后就是html页面了，在HTML只需要简单的定义出一个table就即可

//表单
<form id="form_2" class="p-20">
    <div class="row">
        <div class="col-8">
            <div class="form-group" style="display: flex">
                <select class="form-control input-group-addon col-2" name="type" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px">
                    <option value="dm">订单号</option>
                    <option value="no">渠道流水号</option>
                </select>
                <input type="text" class="form-control col-6" name="num" style="border-bottom-left-radius: 0px; border-top-left-radius: 0px">
            </div>
        </div>
        <div class="col-12">
            <div class="form-group col-1" style="padding: 0px">
                <input type="submit" name="submit" class="btn btn-info" value="查询" />
            </div>
        </div>
    </div>
</form>
//表格
<table