Tutoriel du plug-in de table de pagination Bootstrap

Cet article explique comment utiliser le plug-in de table de pagination Bootstrap. Il existe deux façons d'obtenir des données dans la table d'amorçage. L'une consiste à spécifier la source de données via l'attribut data-url de la table. pour obtenir les données en spécifiant l'url lors de l'initialisation de la table via JavaScript.

Tutoriel sur la façon d'utiliser le plug-in de table de pagination Bootstrap

J'ai trouvé deux plug-ins de table, l'un est bootstrap table et l'autre est bootstrap -paginator

Ici, nous introduisons uniquement l'utilisation du plug-in de table bootstrap et des cas simples

Introduction au document : http://bootstrap-table.wenzhixin.net. cn/zh-cn/documentation/

Tutoriel vidéo recommandé : Tutoriel Bootstrap

Présenter les fichiers js et 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. Remplissage des données de la table

Il existe deux façons d'obtenir des données dans la table bootStrap. La première consiste à spécifier la source de données via l'attribut data-url de. la table, et l'autre consiste à obtenir les données en spécifiant l'url lors de l'initialisation de la table via JavaScript*

Remarque : si data-toggle="table" est utilisé, l'opération js sera invalide, sinon elle prendra effet

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

3 Cas et explications de js obtenant des données

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

rrree.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!