Home > Web Front-end > Bootstrap Tutorial > Bootstrap paging table plug-in tutorial

Bootstrap paging table plug-in tutorial

angryTom
Release: 2020-05-15 09:13:10
forward
4755 people have browsed it

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 tutorial

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>
Copy after login

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;
 });
Copy after login

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>
Copy after login
rrree

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template