Geek Answers Handbook

Boot table filter does not work

I want to add filtering for the initial table. I added two attributes, I round them in the code below. Why doesn't it work? What else should I do?

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

I have some kind of JS script to service the error from the server

  $('#clients-table').bootstrapTable({ onLoadError: function (status) { SetErrorMessage('Wystąpił błąd serwera podczas wczytywania danych. Skontaktuj się z administratorem.'); } });

I also added these scripts

 <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>
+6
source share
1 answer

If you want a filter with a choice, I think it works:

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

And your 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" } ] }
+7
source

More articles:


All Articles