Bootstrap paging table plug-in tutorial

This article introduces how to use the Bootstrap paging table plug-in. There are two ways to obtain data in the bootstrap table. One is to specify the data source through the data-url attribute of the table, and the other is to obtain the data by specifying the url when initializing the table through JavaScript. .

Bootstrap paging table plug-in usage tutorial

I found two table plug-ins, one is bootstrap table and the other is bootstrap -paginator

Here we only introduce the use of bootstrap table plug-in and simple cases

Document introduction: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Recommended video tutorial: Bootstrap tutorial

1. Introduce js and css files

<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css">
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>

2.table data filling

bootStrap table has two ways to obtain data. One is to specify the data source through the data-url attribute of the table, and the other is to obtain the data by specifying the url when initializing the table through JavaScript*

Note: If data-toggle="table" is used, the js operation will be invalid, otherwise it will take effect

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
    
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;data.json&#39;
 });

3. Cases and explanations of js obtaining data

<div class="panel panel-default">
            <div class="panel-body table-responsive">
　　　　　　　　　
    <div class="query-div" id="toolbar">
        <form class="form-inline" role="form" id="query_form">
            <div class="form-group query-form-group">
                <label for="status">状态</label>
                <select class="form-control" id="with_appr_status"
                    <option value="">全部</option>
                    <option value="S1">待处理</option>
                    <option value="S2">已处理</option>
                </select>
            </div>
            <div class="form-group query-form-group">
                <button type="button" class="btn btn-default" id="with_query">查询</button>
            </div>
        </form>
    </div>
                <table id="query_results" class="table table-hover">
                    <thead>
                    <tr>
                        <th data-field="code">编号</th>
                        <th data-field="time">申请时间</th>
                        <th data-field="status" data-formatter="formatStatus">提现状态</th>
                        <th data-field="remark">备注</th>
                    </tr>
                    </thead>
                </table>
            </div>
</div>

The above is the detailed content of Bootstrap paging table plug-in tutorial. For more information, please follow other related articles on the PHP Chinese website!