Themergency fooplugins.com

Footable Sorting and Filtering

| 28 Comments

I think it’s about time we updated everyone on Footable! Since it was first released, we have completed both the sorting and filtering add-ons.

To include the add-on functionality, simply include a reference to the add-on javascript file (and css if applicable) and footable will take care of the rest!

Sorting

When you include the sorting add-on, all columns in your table will be sortable by default. You can turn this off for certain columns by adding

data-sort-ignore="true"

You might also want to include the data-type attribute if the column contains numbers or dates. You can also initially sort a specific column on load.

Here is an example of using all 3 together:


<thead>
<tr>
<th data-class="expand" data-sort-initial="true">
<span title="table sorted by this column on load">First Name</span>
</th>
<th data-hide="default" data-sort-ignore="true">
<span title="sorting disabled on this column">Last Name</span>
</th>
<th data-hide="phone,tablet" data-type="numeric">
Date Of Birth
</th>
<th data-hide="phone" data-type="numeric">
Status
</th>
</tr>
</thead>

Filtering

To get filtering to work, simply include the filtering add-on and then add an input somewhere in your page. Then all you need to do to hook it up is add a data-filter attribute onto the table like this:

search : <input id="filter" type="text" />

<table data-filter="#filter" class="footable">

Updated Demos

We have updated the demos to include the sorting and filtering add-ons. Check out the list of demos on the Footable homepage.

A note about dates

if you are using dates in your tables, then please remember to always have a data-value attribute on the cell so that sorting will work:

<td data-value="361093678671">11 Jun 1981</td>

21 comments
  Livefyre
  • Get Livefyre
  • FAQ
coastmailers
coastmailers

status filtering is acting buggy.  i have a status of approved (yes or no).  when selecting yes, all the yes are shown.  when selecting no, all the no are shown but also one yes is shown.  why would this happen?

hardin81
hardin81

Amazing plugin in here.. thank you very much

I just wonder one thing.. I try to get a counter to the result list.. 

How to display a counter how many results that match the filter criteria??

A tr row counter works, but it's not working when using pagination.

Any ideas?

 

Example:

 

[ searchfield  ]

Result found: 4

 

Item 1

Item 2

Item 3

 

<< <  1, 2  > >> pagination

 

 

Best regards

MauroCendon
MauroCendon

Hi! Im using Footable with the filter and paginate plugins. Its amazing

 

Im discover a Bug in footable with the filtering plugin. If you filter some rows, resize the window to get toggle buttons and toggle any row detail, then a "filtered" (non-displayed) row is displayed.

 

For example, if you filter only actives, the table shows "Isidra", "Easer" and "Judi" as results (OK).

 

Here's the problem:

If you expand "Judi", then "Lauri" (Suspended) appears.

And if you expand "Easer", then "Maple" is show (Suspended too)

 

Solution:

I find the solution adding the following line to footable.js

In the ft.toggleDetail() method, find the $next.show(); line (601 aprox) and replace with:

 

if ($next.hasClass(cls.detail))

$next.show();

 

That "if" condition only show the row if is a detail, and avoid to show other rows.

 

 @maurocendon  

 @msbodetti 

 

msbodetti

Ok I managed to do the filtering on each column. But I am having another issue, I'm trying to implement a dropdown menu to display certain number of rows. I have done a dropdown and updated the 'date-page-size' attribute to it but it's not working. Is there a work around for this? Or have you done this already? :)

msbodetti

Is there a way to filter on specific column? Instead of the whole table...

tvfoodmaps
tvfoodmaps

From what I can see the sorting only works based on the first character in the string, changing the code to this fixed the sorting:

 

   alpha: function (a, b) {

      /*

        if (a[0] == b[0]) return 0;

        if (a[0] < b[0]) return -1;

        return 1;*/

     return a.localeCompare(b);

      },

 

themergency
themergency moderator

@coastmailers the filtering does not look at a specific column. It looks at all the data in a row, so you could have the letters "no" in the row with the status of "yes" and that is why it is also showing

themergency
themergency moderator

 @hardin81 you can get the row count like this:

 

$('.footable tbody tr:not(.footable-filtered)').length

themergency
themergency moderator

 @MauroCendon  thanks for the solution - is this using the V2 branch?

themergency
themergency moderator

 @msbodetti not out of the box, but if you check out my showcase demo in the V2 branch you will see I do a custom filter on the status which is a specific column

coastmailers
coastmailers

@themergency here is what i did to fix, in-case anyone else needs to do it.  in the jquery with this line: var selected = $('.filter-status').find(':selected').text(); i changed text to val like this: var selected = $('.filter-status').find(':selected').val();  then in the option select fields i changed the values yes and no and made them unique.  i made then appstatyes and appstatno.  then in the rows of the table i added a span to that cell.  it already had a span for yes and no but i added an extra one for each like this.  yes is echoed like this: <span class='status-metro status-yes' title='Yes'>Yes</span> <span class='hide'>appstatyes</span> ... and no is echoed like this: <span class='status-metro status-no' title='No'>No</span> <span class='hide'>appstatno</span> ... the hide class doesn't let the unique words show, but the filter can still see those words.

coastmailers
coastmailers

@themergency not sure how to do that though.  would look weird if the yes and no words needed to be printed in a weird way for people to see.  how can i do it in code only.  i tried changing the title to the new words and matching the select option values, but that didn't work.

coastmailers
coastmailers

@themergency so to prevent that, i need to make the filter words unique, meaning there's no chance any record/row will have those letters in sequence?

MauroCendon
MauroCendon

 @themergency  @MauroCendon You're welcome @themergency  :). I'dont know the branch because i download footable as zip file, last version.

 

If it helps, footable.js's header is 

 

/*! * FooTable - Awesome Responsive Tables * Version : 0.5 * http://themergency.com/footable * * Requires jQuery - http://jquery.com/ * * Copyright 2019 Steven Usher & Brad Vincent * Released under the MIT license * You are free to use FooTable in commercial projects as long as this copyright header is left intact. * * Date: 22 Apr 2013 */

 

msbodetti

 @themergency thanks for letting me know! please can you let me know which one that demo is? I cant seem to find it on the home page or if theres a V2 branch? I also cant find it on Github...

MauroCendon
MauroCendon

 @themergency ure welcome. i just see it on github. issue closed!

themergency
themergency moderator

 @MauroCendon cool I managed to duplicate the bug and have commited a fix that sorts this problem out - thanks for letting me know :)

MauroCendon
MauroCendon

 @MauroCendon  @themergency Bug is in the v2 branch. i had it in my work's computer. 

MauroCendon
MauroCendon

 @themergency Ok, i download V2 version. Anyway have the bug. Cheers!

themergency
themergency moderator

 @MauroCendon ah that is the older version - try this branch rather - it has been updated quite a lot from the version you are using : https://github.com/bradvin/FooTable/archive/V2.zip

msbodetti

 @themergency Sorry found it on Github! :))