Bootstrap表過濾不起作用
[英]Bootstrap table filtering not working
問題描述
我想為bootstrap表添加過濾。 我添加了兩個屬性，我將它們放在下面的代碼中。 為什么不工作？ 我還該怎么辦？
<table id="clients-table" class="table table-striped table-condensed"
data-toggle="table" data-show-toggle="true" data-cache="false" data-show-refresh="true"
data-url="../data.json"
//-----------------------------------------------------
data-filter-control="true"
//-----------------------------------------------------
data-side-pagination="server"
data-search="true" data-sort-name="Id" data-sort-order="desc"
data-pagination="true" data-page-size="25">
<thead>
<tr>
<th data-field="Id" data-sortable="true">Id</th>
<th data-field="Email" data-sortable="true">E-Mail</th>
<th data-field="CompanyName" data-sortable="true">Firma</th>
<th data-field="Name" data-sortable="true">Imię i nazwisko</th>
<th data-field="Phone" data-sortable="true">Nr telefonu</th>
<th data-field="UserType" data-sortable="true">Typ</th>
<th data-field="PricingType" data-sortable="true"
//----------------------------------------------------------
data-filter-control="select"
//----------------------------------------------------------
>Cennik</th>
<th data-field="LastSynchronizationOn" data-sortable="true">Synchronizacja</th>
</tr>
</thead>
</table>
我有一些JS scipt從服務器服務錯誤
$('#clients-table').bootstrapTable({
onLoadError: function (status) {
SetErrorMessage('Wystąpił błąd serwera podczas wczytywania danych. Skontaktuj się z administratorem.');
}
});
我還附上了這個腳本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
1 個解決方案
解決方案1
8 已采納 2015-11-16 10:38:27
如果你想要選擇過濾器，我認為它的工作原理：
<!DOCTYPE html> <html> <head> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" type="text/css" href="http://bootstrap-table.wenzhixin.net.cn/assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script> </head> <body> <table id="clients-table" class="table table-striped table-condensed" data-toggle="table" data-show-toggle="true" data-cache="false" data-show-refresh="true" data-url="data.json" data-filter-control="true" data-side-pagination="server" data-search="true" data-sort-name="Id" data-sort-order="desc" data-pagination="true" data-page-size="25"> <thead> <tr> <th data-field="Id" data-sortable="true">Id</th> <th data-field="Email" data-sortable="true">E-Mail</th> <th data-field="PricingType" data-sortable="true" data-filter-control="select">Cennik</th> <th data-field="LastSynchronizationOn" data-sortable="true">Synchronizacja</th> </tr> </thead> </table> <script> var $table = $('#clients-table'); $table.bootstrapTable(); </script> </body> </html>
還有你的data.json：
{ "total": 800, "rows": [ { "Id": 1, "Email": "email@gmail.com", "PricingType": "Value 1", "LastSynchronizationOn": "date" }, { "Id": 2, "Email": "other@gmail.com", "PricingType": "Value 2", "LastSynchronizationOn": "date" } ] }
Bootstrap動態表不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.