lukaskral / bootstrap-table-filter Goto Github PK

I am using this http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html plugin in my bootstrap table it is not working

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

< script type="javascript">

$(document).ready(function(){

    $('#filter-bar').bootstrapTableFilter({

        filters:[

            {

                field: 'class',    // field identifier

                label: 'Class',    // filter label

                type: 'range'   // filter type

            },

        ],

        onSubmit: function() {

            var data = $('#filter-bar').bootstrapTableFilter('getData');

            console.log(data);

        }

    });

});

</ / /script>

        <table id="tablesort"

          data-toggle="table" 

               data-sort-name="course" 

               data-sort-order="desc" 

               data-search="true"

               data-show-refresh="true"

               data-show-toggle="true"

               data-show-columns="true"

               data-pagination="true"

               data-toolbar="#filter-bar"

               data-show-filter="true"

               class="table table-bordered table-hover table-striped">



            <thead>

                <tr>

                    <th data-field="name" data-align="center" data-sortable="true">Name</th>

                    <th data-field="class" data-align="center" data-sortable="true">Class</th>

                    <th data-field="email" data-align="center" data-sortable="true">Email</th>

                    <th data-field="phone" data-align="center" data-sortable="true">Phone</th>

                    <th data-field="course" data-align="center" data-sortable="true">Course (Level)</th>

                    <th data-field="phase" data-align="center" data-sortable="true">Phase</th>

                </tr>

            </thead>

            <tbody>

< ?php

while($Details = mysqli_fetch_array($Enrolled_Sql, MYSQLI_ASSOC)){

? >

                <tr>

                    <td>< ?php echo output_clean($Details['Name']); ? ></td>

                    <td>< ?php echo output_clean($Details['Class']); ? ></td>

                    <td>< ?php echo output_clean($Details['Address']); ? ></td>

                    <td>< ?php echo output_clean($Details['Number']); ? ></td>

                    <td>< ?php echo output_clean($Details['CName']).','.output_clean($Details['Level']); ? ></td>

                    <td>< ?php echo output_clean($Details['Phase']); ? ></td>

                </tr>                     

< ?php

}

? >

              </tbody>

        </table>

I've looked through most of the post here and all the examples seem broken (no filter option appears):

http://plnkr.co/edit/JkRMZt?p=preview

http://plnkr.co/edit/2dcoPeeBe3UNJl0OR04g?p=preview

Even this one seemed more advanced but the filter does nothing: http://plnkr.co/edit/levlS0kl0lys9Cd9Ie9O?p=preview

Could someone post a working example of this extension please? Thank you a lot in advance. :)

Hello! How I can apply filter in code? The second question is how I can apply not empty filter on table init? Thanks.

I've got a test of this set up, but the filter option doesn't show. Since there is no documentation, I'm having a hard time figuring out why. The pagination, search etc. all show and work, but not the actual filter. Does the filter need to be set up with a jquery function? If so, that won't work for me, I'm using MYSQL to populate the tables on my site.

Uncaught TypeError: Cannot read property 'toggle' of undefined in bootstrap-table-filter.js:545

Hi,

I have placed two bootstrap table in single page. First table for customer address details, second one for product detail, I have used bootstrap-table-filter

the data are loaded correctly.
the filter bar showing column names correctly.

While filtering the last loaded filter bar works correctly where the first one not, I tried to identify the issue the bs-table.js variable name "bootstrapTableFilter" keeps the last loaded filterbar details.

I used bootstrap-table.js, bootstrap-table-filter.js and bs-table.js

if possible can I get an example

On a "select" filter with a lot of selectable values, would be great to have the selected values at the top of the list, regardless the search results.

Currently the filter when it renders the drop down list does not handle skipping null values. A check needs to be added to ensure that the value is not null.

Hi, can you tell me what is the method to update the filter-bar after table update?

I have a table with 3 fields, F1, F2, F3.

When I update a row, in the filter-bar is shown the old field value.

I tryed to call resetView, but without results...

Hello,

I have this problem with your plugin: after applying filters with the command "bootstrapTableFilter (' getData ')", the linked table isn't reloaded. Filters are not executed.

I'm using last version of plugin.

The code is this:

$('#filter-bar').bootstrapTableFilter({
filters:[
{
field: 'descrizioneComune', // field identifier
label: 'descrizione Comune', // filter label
type: 'search' // filter type
},
{
field: 'supTot', // field identifier
label: 'Sup. (Kmq)', // filter label
type: 'range' // filter type
},
],
connectTo: '#comuniGALJson',
onSubmit: function() {
var data = $('#filter-bar').bootstrapTableFilter('getData');
console.log(data);
}
});

Thanks in advance,
Max

Hello.
How can I make undefined columns hidden from the filter list ? i.e the empty one in the image below.
Also is there a way to remove columns from the list that are hidden ?
Also can I remove the Edit / Delete columns ?

Thanks

I'm trying to customize for to choose what column will have a filter.
I made a example about what I'm trying to do:
http://plnkr.co/edit/2dcoPeeBe3UNJl0OR04g?p=preview

How you can see, I have 3 columns: 'Name', 'Course' and 'Country'.
I'd like to filter just by 'Course' and 'Country'. Not by 'Name'!
Someone knows what can I do? =)

bootstrap-table-filter.sj 125行，也就是range的check函数，大小比较时会把等于也判断进去，个人觉得不怎么合理

如何通过ajax 传递参数到服务器端查询

I found that when i select a filter and fill a value for the first time and then press btn-refresh without selecting the checkbox if found the filter to be active. The checkbox has to be selected for the filter to be active, but its not when we enter the data in the above workflow.

• selected filter
• enter text
• do not click checkbox
• click refresh button

and its still filtering

I am using this plugin with bootstrap tables(http://wenzhixin.net.cn/p/bootstrap-table/). When i add this plugin in my code then default search provided by (http://wenzhixin.net.cn/p/bootstrap-table/) doesn't work.

Hi guys

If I use the bootstrap-table-filter extension, the table changes his height after a refresh.
How can I prevent that?

Many Thanks,
Adam-Harrys

I think it would be extremely valuable to have a filter type of 'date' available!

Thank you for your plugin

Hello.

I am having trouble with filters.

select & search are not working but range is working ?

If i do an equals to on a number it is working fine.
If I select a check box or type in the search it comes back blank even tho it is there.

I have a feeling that it might be conflicting with ex-editable because ex-editable adds data-type to the td.

for example:

          td
           a  data-type="text > Product 1   /a
            /td

I noticed that bootstrap table filter uses type: 'search' etc... Would that be the reason ?

my bootstrap table loks a little like this:

The filtering itself works fine, but if i have e.g. a value "ACME" in the list of possible filter values and search for it by typing "acme" in the search field, it won't show because the search seems to be case sensitive. Entering "ACM" works as expected.

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

Hi there,

i'm trying use Filter Control with x-editable, but the problem is this:

When you trying to search, you get all info between "td" tag, and i'm just trying to get text from "a" tag(because of x-editable), and then return wrong results.

can you help?

Regrats,
Marco Santos

Hi guys,

I'm trying to configure the Bootstrap Table Filter to update based on a user clicking on an object rather than using the filter bar itself. If you navigate to http://www.cbstriptracker.com, you'll see that I have a map of the world towards the top of my screen and the Bootstrap Table & Filter at the bottom. I tried to write some JavaScript code such that clicking a country would filter the table accordingly by using the following code:

$('#filter-bar').bootstrapTableFilter('setupFilter', 'country', {_values: ['US']});

I'm getting an error that says bootstrapTableFilter can't be found. Has anyone tried anything similar, and if so have you found a solution for updating the filter based on an event?

Hello,

I want to initialize the filter bar with an active filter which is also initialised with a value.

For example, when the table is created, I would like the column "state" filtered with the condition equal to "added".

Edit

I have a second question : How to edit a filter.

I want to change the type a filter, for example, from "search" to "check"

Hello! Last version of filters seems broken - it does nothing after clicking on apply button (no errors on console)

http://plnkr.co/edit/XA0kUc?p=preview - your plnkr's you attached to #3 is not working.

http://plnkr.co/edit/JkRMZt?p=preview - this one you attached to #5 works, but if I add pagination (data-pagination="true") - it's not working again

Also examples attached to github repo behave like plnkr 1.

bootstrap-filters look very usefull but I can't use it, could you please investigate this issue.

thx

data-url定义了,自定义toolbar,里边写的自定义查询条件,查询的时候用bootstrapTable('refresh',{query{}})，第一页有效果,点击第二页查询参数就没了

Hi guys

How can I set a default filter?

Example:
If I want to hide all rows with the id 1, 12 and 33 I now have to manually check this ids.
But I want to set them as checked in the js code.

Is it possible to do that?

Many thanks,
Adam-Harrys