javascript - Bootstrap table filtering not working - Stack Overflow

admin管理员组

文章数量:1287125

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/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script>

<script src="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script>
<script src="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script>

<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

• javascript
• c#
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Nov 16, 2015 at 11:13 Jacek asked Nov 12, 2015 at 11:31 JacekJacek 12.1k2626 gold badges7575 silver badges128128 bronze badges 1

• 1 Aside: What's the story behind those // ments? HTML ments are <!-- ... --> – Abhitalks Commented Nov 17, 2015 at 16:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +100

If you want filter with select, i think it works:

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <!-- Latest piled and minified CSS -->
  <link rel="stylesheet" type="text/css" href="http://bootstrap-table.wenzhixin.cn/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css">
	<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>

	<script src="http://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
	<script src="http://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script>

	<script src="http://cdnjs.cloudflare./ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script>
	<script src="http://cdnjs.cloudflare./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"
	}
  ]
}

本文标签： javascriptBootstrap table filtering not workingStack Overflow