Does this work?

[danielmwilliams]

I cannot get this to work? Documentation examples vary greatly. Repo does locally and on jsfiddle without luck. Can you help me out here?

[lukaskral]

hi @danielmwilliams ,

can you see any errors in console? There is a plunker example that works for me, see http://plnkr.co/edit/CSwl1u

[AlexWerz]

I fiddled it out:

1. You need obviously bootstrap and bootstrap-table
2. You need the bootstrap-table-filter-EXTENSION + the bootstrap-table-filter.js + bs-tables!

So you end up with:

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-table-filter.css" />

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/extensions/bootstrap-table-filter.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table-filter/bootstrap-table-filter.js"></script>
<script type="text/javascript" src="/js/bootstrap-table-filter/bs-table.js"></script>

The table will be displayed with:

    <div id="filter-bar"> </div>

    <table id="tbl"
        data-toggle="table"
        data-url="/data1.json"
        data-toolbar="#filter-bar"
        data-show-toggle="true"
        data-show-filter="true"
        data-search="true"
        data-pagination="true"
    >
        <thead>
        <tr>
            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
            <th data-field="price" data-align="" data-sortable="true">Item Price</th>
        </tr>
        </thead>
    </table>

Make sure to place the data1.json in your webroot for testing OR add a <tbody>.

HTH Alex

[lkairies]

I followed AlexWerz answer and got the following error:

Uncaught TypeError: Cannot read property 'defaults' of undefined bootstrap-table-filter.min.js:8

I really like the extentsion and tried a lot, but nothing works for me.

[AlexWerz]

You could check the versions of the libraries you have installed. If that does not help strip down your code to a minimal and post it here. Am 12.01.2015 18:09 schrieb "Lukas Kairies" [email protected]:

I followed AlexWerz answer and got the following error:

Uncaught TypeError: Cannot read property 'defaults' of undefined bootstrap-table-filter.min.js:8

I really like the extentsion and tried a lot, but nothing works for me.

— Reply to this email directly or view it on GitHub https://github.com/lukaskral/bootstrap-table-filter/issues/2#issuecomment-69605475 .

[lkairies]

I use the latest version of bootstrap-table and bootstrap-table-filter and bootstrap 3.2. I see no problem with the versions

My Code:

<div id="filter-bar"> </div>

<table 
   class="table table-hover" 
   data-toggle="table" 
   data-url="moduls/json"
   id="module-table" 
   data-toolbar="#filter-bar"
   data-show-toggle="true"
   data-show-refresh="true"
   data-show-filter="true"
   data-show-columns="true"
   >
   <thead>
      <tr>
         <th data-field="titel" data-align="left" data-sortable="true">Titel</th>
         <th data-field="modul_id" data-align="right" data-sortable="true">Nummer</th>
         <th data-field="credits" data-align="right" data-sortable="true">Credits</th>
         <th data-field="form" data-align="right" data-sortable="true">Form</th>
      </tr>
   </thead>
</table>

I also tried to set the filter by adding

<script type="text/javascript">
    $(function() {
        $('#filter-bar').bootstrapTableFilter({
            filters: [...],
            connectTo: '#module-table',
            onSubmit: function() {
                var data = $('#filter-bar').bootstrapTableFilter('getData');
                console.log(data); 
            }
        });
    });
</script>

With this I can select filters but they don't work

[AlexWerz]

Are you able to show data without the extension? If not then your problem is with bootstrap-tables. Other than that I am of no help :-( To be honest: I have switched to Datatables because I was not able to get it to run without a json-datasource.

[ethompsy]

@lukaskral Your plnkr example does not currently work. I cannot get this to work at all. I can get the widget to show up but it doesn't do anything.

[ethompsy]

@lukaskral I also noticed that with your 3 .js files included this breaks:

$triageTable.bootstrapTable('filterBy', {
     brand: $brand
});

What I mean by 'breaks' is that when this code is triggered the table is not filtered and there are no errors, but the data in the table gets messed up and I cannot access row data in the bootstrapTable onClickRow function. (ie this error happens: Uncaught TypeError: Cannot read property 'computer-id' of undefined). In this case computer-id is a column in my table that I use in the onClickRow event.

I hope this helps! I have removed your scripts from my project and implemented my own filtering. Let us know if you fix this.

[aushkov]

@lukaskral

Looks like your plugin doesn't work. I spent a lot of time trying to integrate your plugin to my project but every time I saw just filter button with one option 'Reset all filters'. Today I found that your exaple http://plnkr.co/edit/CSwl1u show the same. Filter button but no any options for filter except 'Reset all ...' Could you advise does it works at all or I just don't understand something.

[murilodbva]

Someone managed?

[sozerberk]

I don't know if anyone solved this on other topics but I will show how to make it work to have the answer here as well.

Put the following js files wherever you want and link them in your HTML file (yes, there are 2 different bootstrap-table-filter.js files): http://wenzhixin.net.cn/p/bootstrap-table/docs/assets/table-filter/bootstrap-table-filter.js http://wenzhixin.net.cn/p/bootstrap-table/src/extensions/filter/bootstrap-table-filter.js http://wenzhixin.net.cn/p/bootstrap-table/docs/assets/table-filter/ext/bs-table.js

Then put the table code and update data-url path for your data:

<div id="filter-bar"> </div>

 <table id="tbl"
     data-toggle="table"
     data-url="data.json"
     data-toolbar="#filter-bar"
     data-show-toggle="true"
     data-show-filter="true"
     data-search="true"
     data-pagination="true">
     <thead>
     <tr>
         <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
         <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
         <th data-field="price" data-align="" data-sortable="true">Item Price</th>
     </tr>
     </thead>
 </table>

That's it.

[ethompsy]

@sozerberk Yes. This is the documented method, but as we have been saying this is not currently working. Even the plnkr example (http://plnkr.co/edit/CSwl1u) is broken. Could you post a plnkr or jsFiddle to show us how it is done? I believe you will find that it does not currently work. If you can prove that it does, then the documentation and example will need to be updated to the current correct method.

[sozerberk]

Hi @ethompsy, you can find a working version in this Plunker example.

[ethompsy]

@sozerberk Thank you so much for the working example! I may need to use this soon.

I would like to point out one thing: You used the scripts from @wenzhixin repository and not the scripts from this repository. Here is an example of what happens using the scripts from this repo: http://plnkr.co/edit/mYHSmE (HINT: it does not work)

I think this is the confusion. Perhaps some people (myself included) did not realize that we should not use these files. They used to be linked to from the bootstrap-table extensions page.

[wenzhixin]

May this example http://issues.wenzhixin.net.cn/bootstrap-table/#561.html help?

[sozerberk]

@ethompsy You're welcome. Yes, the scripts are different. Also, I should warn you search doesn't work with filter extension. I think the problem is at the else at the end of the bs-table.js. If @lukaskral can fix this, it would be really nice.

[sozerberk]

@wenzhixin Yes, it works there as well but search doesn't work again. Any idea how to fix it?

[murilodbva]

@sozerberk , thank you so much for your working example! =D

[sozerberk]

You're welcome @murilodbva , I'm glad it works for you :)

[murilodbva]

@danielmwilliams , there is how to mark this issue like resolved?

[Ruvy]

@sozerberk Your plunker demo stops working as soon as I try to run the file locally or on localhost. Tried CDNs as well as locally saved scripts and css. Neither is it picking up the json data to display in table. :/ EDIT : Okay so now i can see the filter as well as json loads but it does not works. No matter which filter I use it just doesn't filters.

[murilodbva]

@Ruvy , here worked very well. What are you doing?

[Ruvy]

@murilodbva No one is to blame but me. Was using old bootstrap-table script. All fine now :) Thanks @sozerberk for the working demo. Now all I need is a way to limit the filter option available for only certain columns. Can't seem to find a way

[murilodbva]

@Ruvy , I'm in the same way. So, I opened another issue about. Look: https://github.com/lukaskral/bootstrap-table-filter/issues/14

[BenoitFroment]

Hi, I'm actually populate my boostrap table by PDO MySQL requests. I don't really know JSON process, so can someone help me to use these filters please?

[svonborries]

I think it stop working again... your Plunker example @sozerberk stop working again... in the available filters it show you an "undefined" column... @Aorewen i'm populating the table with mysql and had no problem at all. @wenzhixin your example is gone! I have an error: this.$refreshButton.toggle(show); in the bootstrap-table-filter.js (lastone) the $refreshButton is undefined for the this object, does anybody know why? actually I never made it work with the data-show-filter="true" option! I had to made an script to show the html structure

[brettex]

@sozerberk I was able to track down this issue with the Search not working with Filtering. You can see my answer here: http://stackoverflow.com/a/32151137/5253968

[rickyspires]

Hello. When I was pulling my data in from json file it worked but now my data is in the javascript it is not working ? what do i need to change?

This is my set up. I am pulling in the 3 files, including the bs-table.js file. None of the files have been altered. I am using this code for my table. https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html The only difference is have added my data here. like this:

//Table data $table.bootstrapTable({ height: getHeight(), data: [{ "id": "1", "name": "name1", "price": "10" }], columns: [{ -- see https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html ]}
});

I did notice that if I add $('#filter-bar').bootstrapTableFilter(); it does not work at all (unless I rmove the bs-table.js file).

So how do I get the bs-table.js file to see my data ? Thanks Ricky

[edersotto]

here is my Solution to use the dinamyc filters in bootstrap-table and place it in the ajax submit to the server. Note that the "data" is place in just one field. Here is the Link

http://plnkr.co/edit/levlS0kl0lys9Cd9Ie9O?p=catalogue

[divyajyothi1]

using creative-tim, data-control-filter is not working in bootstrap table, can you please help on this issue. Thank you in advance.