Does this work? #2

danielmwilliams · 2014-11-15T16:32:30Z

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 · 2014-11-17T12:43:35Z

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 · 2015-01-09T14:34:28Z

I fiddled it out:

You need obviously bootstrap and bootstrap-table
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 · 2015-01-12T17:09:52Z

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 · 2015-01-12T17:23:31Z

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
#2 (comment)
.

lkairies · 2015-01-14T17:17:49Z

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 · 2015-01-15T11:44:20Z

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 · 2015-02-09T19:27:37Z

@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 · 2015-02-09T22:13:23Z

@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 · 2015-03-27T05:16:11Z

@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 · 2015-04-01T20:12:06Z

Someone managed?

sozerberk · 2015-04-16T12:38:50Z

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 · 2015-04-16T15:35:02Z

@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 · 2015-04-16T16:47:15Z

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

ethompsy · 2015-04-16T17:52:11Z

@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 · 2015-04-17T00:12:29Z

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

sozerberk · 2015-04-17T06:27:13Z

@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 · 2015-04-17T06:27:59Z

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

murilodbva · 2015-04-27T21:19:21Z

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

sozerberk · 2015-04-28T13:13:00Z

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

murilodbva · 2015-05-07T19:30:43Z

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

Ruvy · 2015-05-11T04:14:06Z

@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 · 2015-05-11T17:50:54Z

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

Ruvy · 2015-05-12T03:22:09Z

@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 · 2015-05-12T17:22:58Z

@Ruvy , I'm in the same way. So, I opened another issue about.
Look: #14

BenoitFroment · 2015-07-01T09:10:52Z

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 · 2015-08-12T01:07:39Z

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 · 2015-08-22T00:41:50Z

@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 · 2015-09-03T11:45:32Z

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 · 2016-06-15T23:07:42Z

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 · 2018-08-07T15:27:00Z

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

divyajyothi1 · 2018-08-07T15:27:29Z

https://stackoverflow.com/questions/51715328/bootstrap-table-filter-is-not-working

wenzhixin mentioned this issue Jun 9, 2015

The Table Filter doesn't work wenzhixin/bootstrap-table#402

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does this work? #2

Does this work? #2

danielmwilliams commented Nov 15, 2014

lukaskral commented Nov 17, 2014

AlexWerz commented Jan 9, 2015

lkairies commented Jan 12, 2015

AlexWerz commented Jan 12, 2015

lkairies commented Jan 14, 2015

AlexWerz commented Jan 15, 2015

ethompsy commented Feb 9, 2015

ethompsy commented Feb 9, 2015

aushkov commented Mar 27, 2015

murilodbva commented Apr 1, 2015

sozerberk commented Apr 16, 2015

ethompsy commented Apr 16, 2015

sozerberk commented Apr 16, 2015

ethompsy commented Apr 16, 2015

wenzhixin commented Apr 17, 2015

sozerberk commented Apr 17, 2015

sozerberk commented Apr 17, 2015

murilodbva commented Apr 27, 2015

sozerberk commented Apr 28, 2015

murilodbva commented May 7, 2015

Ruvy commented May 11, 2015

murilodbva commented May 11, 2015

Ruvy commented May 12, 2015

murilodbva commented May 12, 2015

BenoitFroment commented Jul 1, 2015

svonborries commented Aug 12, 2015

brettex commented Aug 22, 2015

rickyspires commented Sep 3, 2015

edersotto commented Jun 15, 2016

divyajyothi1 commented Aug 7, 2018

divyajyothi1 commented Aug 7, 2018

Does this work? #2

Does this work? #2

Comments

danielmwilliams commented Nov 15, 2014

lukaskral commented Nov 17, 2014

AlexWerz commented Jan 9, 2015

lkairies commented Jan 12, 2015

AlexWerz commented Jan 12, 2015

lkairies commented Jan 14, 2015

AlexWerz commented Jan 15, 2015

ethompsy commented Feb 9, 2015

ethompsy commented Feb 9, 2015

aushkov commented Mar 27, 2015

murilodbva commented Apr 1, 2015

sozerberk commented Apr 16, 2015

ethompsy commented Apr 16, 2015

sozerberk commented Apr 16, 2015

ethompsy commented Apr 16, 2015

wenzhixin commented Apr 17, 2015

sozerberk commented Apr 17, 2015

sozerberk commented Apr 17, 2015

murilodbva commented Apr 27, 2015

sozerberk commented Apr 28, 2015

murilodbva commented May 7, 2015

Ruvy commented May 11, 2015

murilodbva commented May 11, 2015

Ruvy commented May 12, 2015

murilodbva commented May 12, 2015

BenoitFroment commented Jul 1, 2015

svonborries commented Aug 12, 2015

brettex commented Aug 22, 2015

rickyspires commented Sep 3, 2015

edersotto commented Jun 15, 2016

divyajyothi1 commented Aug 7, 2018

divyajyothi1 commented Aug 7, 2018