Tutorial zum Bootstrap-Paging-Tabellen-Plug-in

In diesem Artikel wird die Verwendung des Bootstrap-Paging-Tabellen-Plugins vorgestellt. Es gibt zwei Möglichkeiten, Daten in der Bootstrap-Tabelle abzurufen. Eine besteht darin, die Datenquelle über das Daten-URL-Attribut der Tabelle anzugeben um die Daten durch Angabe der URL beim Initialisieren der Tabelle über JavaScript zu erhalten.

Tutorial zur Verwendung des Bootstrap-Paging-Tabellen-Plug-Ins

Ich habe zwei Tabellen-Plug-Ins gefunden, eines ist Bootstrap-Tabelle und das andere ist Bootstrap -Paginator

Hier stellen wir nur die Verwendung des Bootstrap-Tabellen-Plug-Ins und einfache Fälle vor

Dokumenteinführung: http://bootstrap-table.wenzhixin.net.cn/zh- cn/documentation/

Empfohlenes Video-Tutorial: Bootstrap-Tutorial

1. Einführung in JS- und CSS-Dateien

<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.Tabellendatenfüllung

Es gibt zwei Möglichkeiten, Daten in der BootStrap-Tabelle abzurufen. Eine besteht darin, die Datenquelle über das data-url-Attribut der Tabelle anzugeben Die andere besteht darin, die Daten durch Angabe der URL beim Initialisieren der Tabelle über JavaScript abzurufen*

Hinweis: Wenn data-toggle="table" verwendet wird, ist die js-Operation ungültig, andernfalls wird sie wirksam

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

3. Fälle und Erklärungen zur Datenbeschaffung durch js

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

rree

Das obige ist der detaillierte Inhalt vonTutorial zum Bootstrap-Paging-Tabellen-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!