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

最新推荐文章于 2024-04-12 20:46:50 发布

原创

最新推荐文章于 2024-04-12 20:46:50 发布 · 2.2k 阅读

标签

#php #JQuery #bootstarp-table #ajax #分页

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

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 id="bootstrap_table"></table>

接着就可以在JS端初始化table了

var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#bootstrap_table').bootstrapTable({
                url: "<?=url('getData')?>",         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',

最低0.47元/天解锁文章