ブートストラップ ページング テーブル プラグインのチュートリアル

この記事では、ブートストラップ ページング テーブル プラグインの使用方法を紹介します。ブートストラップ テーブルのデータを取得するには 2 つの方法があります。1 つはテーブルの data-url 属性を通じてデータ ソースを指定する方法で、もう 1 つはJavaScriptでテーブルを初期化する際にURLを指定してデータを取得します。

ブートストラップ ページング テーブル プラグインの使用法チュートリアル

2 つのテーブル プラグインを見つけました。1 つはブートストラップ テーブル、もう 1 つはブートストラップ テーブルです。 is bootstrap -paginator

ここでは、ブートストラップ テーブル プラグインの使用法と簡単なケースのみを紹介します

ドキュメントの紹介: http://bootstrap-table.wenzhixin.net.cn/zh- cn/documentation/

推奨ビデオ チュートリアル: ブートストラップ チュートリアル

1. js および css ファイルの紹介

<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.テーブルのデータ入力

bootStrap テーブルにはデータを取得する 2 つの方法があります。1 つはテーブルの data-url 属性を通じてデータ ソースを指定する方法、もう 1 つはテーブルの data-url 属性を使用してデータ ソースを指定する方法です。 JavaScript でテーブルを初期化するときに URL を指定してデータを取得することです*

注: data-toggle="table" が使用されている場合、js 操作は無効になり、それ以外の場合は有効になります

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

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

errree

以上がブートストラップ ページング テーブル プラグインのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。