Title: DataTables Range Filtering
Last modified: May 23, 2018

---

# DataTables Range Filtering

 *  Resolved [viablethought](https://wordpress.org/support/users/viablethought/)
 * (@viablethought)
 * [8 years ago](https://wordpress.org/support/topic/datatables-range-filtering/)
 * Hello –
 * Just a quick question, looking to add the Range Filtering functionality from 
   the DataTables plugin:
 * [DataTables Range Filtering](https://www.datatables.net/examples/plug-ins/range_filtering.html)
 * Is it possible to do? Can I create a jQuery script to prepend the HTML above 
   the table and use the code example from the link to make the functionality happen?
 * Thanks in advance.

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [8 years ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10316449)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Unfortunately, this functionality is not directly available in TablePress. You
   would indeed have to add the relevant HTML and JS code to the page yourself. 
   For that, it’s the best to turn off the DataTables integration on your table’s“
   Edit” screen entirely, as you then have most flexibility.
 * Regards,
    Tobias
 *  Thread Starter [viablethought](https://wordpress.org/support/users/viablethought/)
 * (@viablethought)
 * [8 years ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10317581)
 * Tobias –
 * Thanks for the quick response, I was actually able to accomplish this yesterday
   pretty easily just by pretending the fields to the .dataTables wrapper and used
   the example code on the page I linked. Works perfectly without messing around
   with the plugin’s options.
 * Good to go. Thanks.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [8 years ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10317981)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * Best wishes,
    Tobias
 * P.S.: In case you haven’t, please [rate TablePress](https://wordpress.org/support/plugin/tablepress/reviews/#new-post)
   here in the plugin directory. Thanks!
 *  [sinestro666](https://wordpress.org/support/users/sinestro666/)
 * (@sinestro666)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10601894)
 * [@viablethought](https://wordpress.org/support/users/viablethought/)
 * I am facing the exact same problem. I want the exact same minimum and maximum
   sorting in my table. Could you please share the steps of how you resolved it?
   I am not that smart to figure it out by myself 🙁
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10602889)
 * Hi,
 * I’m not sure if Jason gets notified here. You could therefore maybe also try 
   contacting through the website mentioned in his profile at [https://wordpress.org/support/users/viablethought/](https://wordpress.org/support/users/viablethought/)
 * Regards,
    Tobias
 *  Thread Starter [viablethought](https://wordpress.org/support/users/viablethought/)
 * (@viablethought)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10605153)
 * @sinetro666 –
 * You can find information about how to accomplish what you are looking for here:
 * [https://datatables.net/examples/plug-ins/range_filtering.html](https://datatables.net/examples/plug-ins/range_filtering.html)
 * Then as far as applying that, it all depends on your theme’s setup and capabilities.
   We had to custom modify some stuff on our end which probably won’t work in your
   scenario. But you can at least start there.
 * 🙂
 *  [sinestro666](https://wordpress.org/support/users/sinestro666/)
 * (@sinestro666)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10605537)
 * Hey, I had this link before but I couldn’t figure out how to implement it and
   that is when I landed on this page.
 * Is there any quick way in which you could explain it to me without wasting much
   of your precious time? It would really be great!
    -  This reply was modified 7 years, 9 months ago by [sinestro666](https://wordpress.org/support/users/sinestro666/).
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10605697)
 * Hi,
 * thanks for sharing this, Jason!
 * sinestro666, you will probably need custom coding using JavaScript here. From
   my experience, the best approach is to turn off the DataTables integration of
   TablePress and then load and initialize it manually, as you then have full control
   of the code.
 * Regards,
    Tobias
 *  [sinestro666](https://wordpress.org/support/users/sinestro666/)
 * (@sinestro666)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10605721)
 * But everything is set up and I love your plugin. I really don’t want to remove
   it.
    I guess I’ll have to find some other way to filter it. I just want to filter
   the numbers with a basic condition. Just show the rows which have column C value
   >30. This page had the closest possible solution to that.
 * Is there a way to edit your button filters to have this functionality? They have
   OR search but I want “>” (greater than) search. I read on the other posts by 
   you that it’s not possible. But those were months ago. So, just bringing it up
   again in case it has become possible now.
 * Off-topic, you’re one of the great developers who actually reply on the forums
   and that too quickly. Very few do that. No matter how this problem turns out 
   to be, I really want to thank you for that. A lot of us just search for the solution
   of our problems and never get to thank for that. ^.^
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10605725)
 * Hi,
 * I’m not saying that you should stop using TablePress here 🙂
 * For what you would like to achieve it would however be the easiest to do the 
   DataTables JavaScript integration manually. This means to turn off the “Use DataTables”
   checkbox on the table’s “Edit” screen and instead load the DataTables JS files
   manually, and then use a custom JS call, as mentioned in that link. This will
   give you full freedom regarding the filtering.
    Doing this with the integration
   of DataTables into TablePress is not directly possible. You will need custom 
   coding here.
 * Regards,
    Tobias
 *  Thread Starter [viablethought](https://wordpress.org/support/users/viablethought/)
 * (@viablethought)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10606520)
 * [@sinestro666](https://wordpress.org/support/users/sinestro666/) –
 * This is the best I can do for you as this is the very basic implementation. You
   will have to read up on how to customize this code to your needs, or hire a developer
   to accomplish what you are looking for.
 * You will have to go through this code and replace the variables with your own.
   e.g. I was sorting an “age” column.
 * For this, I left the “Use DataTables” option checked so I didn’t need to load
   it manually, but you can also do that as well depending on your use and what 
   you need.
 *     ```
       jQuery.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
         var min = parseInt(jQuery('#min').val(), 10);
         var max = parseInt(jQuery('#max').val(), 10);
         var age = parseFloat(data[2]) || 0; // column to use for filtering
   
         if ((isNaN(min) && isNaN(max)) || (isNaN(min) && age <= max) || (min <= age && isNaN(max)) || (min <= age && age <= max)) {
           return true;
         }
         return false;
       });
   
       jQuery(document).ready(function($) {
         var rangeFields = '<table cellspacing="5" cellpadding="5" border="0"><tbody><tr><td>Minimum age:</td><td><input id="min" name="min" type="text"></td></tr><tr><td>Maximum age:</td><td><input id="max" name="max" type="text"></td></tr></tbody></table>';
         var table = $('.tablepress').DataTable();
   
         $('.dataTables_wrapper').prepend(rangeFields);
   
         // Event listener to the two range filtering inputs to redraw on input
         $('#min, #max').keyup(function() {
           table.draw(false);
           table.order([
             [2, 'asc']
           ])
         });
       });
       ```
   
 * Good luck!
    -  This reply was modified 7 years, 9 months ago by [viablethought](https://wordpress.org/support/users/viablethought/).
 *  [sinestro666](https://wordpress.org/support/users/sinestro666/)
 * (@sinestro666)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10606673)
 * First of all, thanks a lot Tobias and Jason for trying to help. I also left the“
   Use DataTables” option checked. I tried loading this script with the Scripts 
   n Styles plugin on the post but nothing happened. The table also didn’t render
   for the minimum and maximum age input which means that I am doing something/not
   doing some major steps here.
 * I guess I am too stupid to figure this one out by myself.
 *  Thread Starter [viablethought](https://wordpress.org/support/users/viablethought/)
 * (@viablethought)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10606768)
 * [@sinestro666](https://wordpress.org/support/users/sinestro666/) –
 * Make sure you also have “Allow Filtering/Sorting” enabled as well. Check your
   code and make sure that the .dataTables_wrapper class is being added to the main
   table as the code above relies on that being there.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10607955)
 * Hi,
 * sinestro666, you are definitely not too stupid for this. It’s just not a directly
   usable “one size fits all solution”, but will need customized adjustments and
   coding.
 * Regards,
    Tobias

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘DataTables Range Filtering’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

## Tags

 * [datatables](https://wordpress.org/support/topic-tag/datatables/)

 * 14 replies
 * 3 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [7 years, 9 months ago](https://wordpress.org/support/topic/datatables-range-filtering/#post-10607955)
 * Status: resolved