Maison >interface Web >Tutoriel d'amorçage >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> $('#table').bootstrapTable({ url: 'data.json' });
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!