Bootstrap table filtering not working
11,502
If you want filter with select, 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 protected]",
"PricingType": "Value 1",
"LastSynchronizationOn": "date"
},
{
"Id": 2,
"Email": "[email protected]",
"PricingType": "Value 2",
"LastSynchronizationOn": "date"
}
]
}
Comments
-
Jacek almost 2 years
I want to add filtering for bootstrap table. I added two attributes, I round them in code below. Why it not working? 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 alse some JS scipt to service error from server
$('#clients-table').bootstrapTable({ onLoadError: function (status) { SetErrorMessage('Wystąpił błąd serwera podczas wczytywania danych. Skontaktuj się z administratorem.'); } });
I also attached this 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>
-
Jacek over 8 yearsThanks for your answer, I had attached CSS files, but without this "bootstrap-table.wenzhixin.net.cn/assets/bootstrap/css/…". When I link it I get error about CORS "Font from origin 'bootstrap-table.wenzhixin.net.cn' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:1294' is therefore not allowed access." Do you have any idea what should I change?
-
Paulo Menezes over 8 yearsYou put: var $table = $('#clients-table'); $table.bootstrapTable();
-
Jacek over 8 yearsI updated my post, I had before similar code. Please look at this
-
Paulo Menezes over 8 yearsYour data.json, have the same structure? "rows": []
-
Jacek over 8 yearsYes, struct is the same. I see rows read from db, but I not see filter input. Html generated for filter is "<div class="fht-cell"></div>"
-
Paulo Menezes over 8 yearsYour problem, is the input filter or select filter?
-
Jacek over 8 yearsselect / dropdownlist
-
Jacek over 8 yearsThere is link how it looks like at this moment postimg.org/image/pr0on4dc3/d9f7b929
-
Paulo Menezes over 8 yearsStrange, the select works here: postimg.org/image/5pfezlhdb Your console show some error?
-
Jacek over 8 yearsOnly this error with CORS. Please look at top of our conversation
-
Paulo Menezes over 8 yearsI think it isn't your problem, but you can switch by this url: maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
-
Jacek over 8 yearsI code which you gave me as example I get the same error, but it show dropdownlist in your example.
-
Jacek over 8 yearsNow it works, in main layout there was linked js file which override this feature. Thanks for your time and help :)