JQuery datatable

JavaScript
1

Hi

I am new to the jquery language and i’m trying to add a checkbox feature to a datatable but cannot get it to work. I am trying to add checkboxes for filtering multiple items within a column.

For example:
Based on the table at:
DataTables example

I am trying to add the function allow checkboxes to be selected so given column one is called “Engine”, I would like to unselected boxes leaving only “KHTML” and “Presto” checked thus only showing all data with Engine types of the above (multi filter on single column).

I know this should use the RegExp function and I have found a page that explains this but when I try and implement, It just won’t work. The page with the code on how to do this can see at:
DataTables forum - Filtering Table with Checkbox Values

Could anybody help me add this code so I can get it working?

Many thanks for any help.

2

You could also make use of the built-in toggle-column feature.

The demo shows links that toggle individual columns, but checkboxes would work just as well.

3

Hi

Thanks for helping but I don’t want to hide columns. I want to allow multifiltering on a single column. either by multiselect or preferably by checboxes.

4

Ahh, now I follow you. In that case I would go with the regex datatable filtering, and use the checkbox onclick event to get all of the active values and filter by them.

It’s far too late at 2am for me to do anything now, but I might see what I can do if nobody manages to come up with something by tomorrow.

5

Hi Paul

Yes are right. It is the regex but i’m not the best programmer in the world. I have no idea how I can implement this within the Array coding.

Any help you can do will be fantastic! I’d be in bed at this time or skydiving in taupo and bungeeing at waikato river. ha ha.

6

Here’s a simple example, using the regex datatable demo as a base to work from.

The checkboxes allow you to specify which values you want to filter.


<ul>
    <li><input type="checkbox" name="rendering_filter" value="gecko" checked="checked"> Gecko</li>
    <li><input type="checkbox" name="rendering_filter" value="khtml" checked="checked"> KHTML</li>
    <li><input type="checkbox" name="rendering_filter" value="misc" checked="checked"> Misc</li>
    <li><input type="checkbox" name="rendering_filter" value="other" checked="checked"> Other Browsers</li>
    <li><input type="checkbox" name="rendering_filter" value="presto" checked="checked"> Presto</li>
    <li><input type="checkbox" name="rendering_filter" value="tasman" checked="checked"> Tasman</li>
    <li><input type="checkbox" name="rendering_filter" value="trident" checked="checked"> Trident</li>
    <li><input type="checkbox" name="rendering_filter" value="webkit" checked="checked"> Webkit</li>
</ul>

If you have selected KHTML and Tasman, the regex search we perform for that is KHTML|Tasman
The regex search isn’t case-sensitive either.

In order to get those values, we take all of the checked checkboxes and map their values to a separate array, before joining them together with a pipe symbol between them.


$('#example').dataTable();

$(':checkbox[name="rendering_filter"]').click(function() {
    var filter = '',
        regexFilter = true,
        smartFilter = false;
        
    filter = $('[name="' + this.name + '"]:checked').map(function () {
        return this.value;
    }).toArray().join('|');

    $('#example').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
});

Here’s the full working example, complete with the “initialization code” shown at the bottom of the page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
	<head> 
        <base href="http://datatables.net/examples/api/regex.html">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" /> 
		
		<title>DataTables example</title> 
		<style type="text/css" title="currentStyle"> 
			@import "/release-datatables/media/css/demo_page.css";
			@import "/release-datatables/media/css/demo_table.css";
		</style> 
		<script type="text/javascript" language="javascript" src="/release-datatables/media/js/jquery.js"></script> 
		<script type="text/javascript" language="javascript" src="/release-datatables/media/js/jquery.dataTables.js"></script> 
		<script type="text/javascript" charset="utf-8"> 
			$(document).ready(function() {
                $('#example').dataTable();

                $(':checkbox[name="rendering_filter"]').click(function() {
                    var filter = '',
                        regexFilter = true,
                        smartFilter = false;

                    filter = $('[name="' + this.name + '"]:checked').map(function () {
                        return this.value;
                    }).toArray().join('|');

                    $('#example').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
                });
            });
		</script> 
	</head> 
	<body id="dt_example"> 
		<div id="container"> 
			<div class="full_width big"> 
				<i>DataTables</i> filtering API example
			</div> 
			
			<h1>Live example</h1> 
			
			<table cellpadding="0" cellspacing="0" border="0" class="display"> 
				<thead> 
					<tr>
                        <td>
                            <ul>
                                <li><input type="checkbox" name="rendering_filter" value="gecko" checked="checked"> Gecko</li>
                                <li><input type="checkbox" name="rendering_filter" value="khtml" checked="checked"> KHTML</li>
                                <li><input type="checkbox" name="rendering_filter" value="misc" checked="checked"> Misc</li>
                                <li><input type="checkbox" name="rendering_filter" value="other" checked="checked"> Other Browsers</li>
                                <li><input type="checkbox" name="rendering_filter" value="presto" checked="checked"> Presto</li>
                                <li><input type="checkbox" name="rendering_filter" value="tasman" checked="checked"> Tasman</li>
                                <li><input type="checkbox" name="rendering_filter" value="trident" checked="checked"> Trident</li>
                                <li><input type="checkbox" name="rendering_filter" value="webkit" checked="checked"> Webkit</li>
                            </ul>
                        </td>
					</tr> 
				</tbody> 
			</table> 
			
			<div id="demo"> 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
	<thead> 
		<tr> 
			<th>Rendering engine</th> 
			<th>Browser</th> 
			<th>Platform(s)</th> 
			<th>Engine version</th> 
			<th>CSS grade</th> 
		</tr> 
	</thead> 
	<tbody> 
		<tr class="gradeX"> 
			<td>Trident</td> 
			<td>Internet
				 Explorer 4.0</td> 
			<td>Win 95+</td> 
			<td class="center">4</td> 
			<td class="center">X</td> 
		</tr> 
		<tr class="gradeC"> 
			<td>Trident</td> 
			<td>Internet
				 Explorer 5.0</td> 
			<td>Win 95+</td> 
			<td class="center">5</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Trident</td> 
			<td>Internet
				 Explorer 5.5</td> 
			<td>Win 95+</td> 
			<td class="center">5,5</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Trident</td> 
			<td>Internet
				 Explorer 6</td> 
			<td>Win 98+</td> 
			<td class="center">6</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Trident</td> 
			<td>Internet Explorer 7</td> 
			<td>Win XP SP2+</td> 
			<td class="center">7</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Trident</td> 
			<td>AOL browser (AOL desktop)</td> 
			<td>Win XP</td> 
			<td class="center">6</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Firefox 1.0</td> 
			<td>Win 98+ / OSX.2+</td> 
			<td class="center">1,7</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Firefox 1.5</td> 
			<td>Win 98+ / OSX.2+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Firefox 2.0</td> 
			<td>Win 98+ / OSX.2+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Firefox 3.0</td> 
			<td>Win 2k+ / OSX.3+</td> 
			<td class="center">1,9</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Camino 1.0</td> 
			<td>OSX.2+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Camino 1.5</td> 
			<td>OSX.3+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Netscape 7.2</td> 
			<td>Win 95+ / Mac OS 8.6-9.2</td> 
			<td class="center">1.7</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Netscape Browser 8</td> 
			<td>Win 98SE+</td> 
			<td class="center">1,7</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Netscape Navigator 9</td> 
			<td>Win 98+ / OSX.2+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.0</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.1</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1,1</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.2</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1,2</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.3</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1,3</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.4</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1,4</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.5</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1,5</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.6</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">1,6</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.7</td> 
			<td>Win 98+ / OSX.1+</td> 
			<td class="center">1,7</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Mozilla 1.8</td> 
			<td>Win 98+ / OSX.1+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Seamonkey 1.1</td> 
			<td>Win 98+ / OSX.2+</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Gecko</td> 
			<td>Epiphany 2.20</td> 
			<td>Gnome</td> 
			<td class="center">1,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>Safari 1.2</td> 
			<td>OSX.3</td> 
			<td class="center">125,5</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>Safari 1.3</td> 
			<td>OSX.3</td> 
			<td class="center">312,8</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>Safari 2.0</td> 
			<td>OSX.4+</td> 
			<td class="center">419,3</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>Safari 3.0</td> 
			<td>OSX.4+</td> 
			<td class="center">522,1</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>OmniWeb 5.5</td> 
			<td>OSX.4+</td> 
			<td class="center">420</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>iPod Touch / iPhone</td> 
			<td>iPod</td> 
			<td class="center">420,1</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Webkit</td> 
			<td>S60</td> 
			<td>S60</td> 
			<td class="center">413</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 7.0</td> 
			<td>Win 95+ / OSX.1+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 7.5</td> 
			<td>Win 95+ / OSX.2+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 8.0</td> 
			<td>Win 95+ / OSX.2+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 8.5</td> 
			<td>Win 95+ / OSX.2+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 9.0</td> 
			<td>Win 95+ / OSX.3+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 9.2</td> 
			<td>Win 88+ / OSX.3+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera 9.5</td> 
			<td>Win 88+ / OSX.3+</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Opera for Wii</td> 
			<td>Wii</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Nokia N800</td> 
			<td>N800</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Presto</td> 
			<td>Nintendo DS browser</td> 
			<td>Nintendo DS</td> 
			<td class="center">8,5</td> 
			<td class="center">C/A<sup>1</sup></td> 
		</tr> 
		<tr class="gradeC"> 
			<td>KHTML</td> 
			<td>Konqureror 3.1</td> 
			<td>KDE 3.1</td> 
			<td class="center">3,1</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>KHTML</td> 
			<td>Konqureror 3.3</td> 
			<td>KDE 3.3</td> 
			<td class="center">3,3</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>KHTML</td> 
			<td>Konqureror 3.5</td> 
			<td>KDE 3.5</td> 
			<td class="center">3,5</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeX"> 
			<td>Tasman</td> 
			<td>Internet Explorer 4.5</td> 
			<td>Mac OS 8-9</td> 
			<td class="center">-</td> 
			<td class="center">X</td> 
		</tr> 
		<tr class="gradeC"> 
			<td>Tasman</td> 
			<td>Internet Explorer 5.1</td> 
			<td>Mac OS 7.6-9</td> 
			<td class="center">1</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeC"> 
			<td>Tasman</td> 
			<td>Internet Explorer 5.2</td> 
			<td>Mac OS 8-X</td> 
			<td class="center">1</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Misc</td> 
			<td>NetFront 3.1</td> 
			<td>Embedded devices</td> 
			<td class="center">-</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeA"> 
			<td>Misc</td> 
			<td>NetFront 3.4</td> 
			<td>Embedded devices</td> 
			<td class="center">-</td> 
			<td class="center">A</td> 
		</tr> 
		<tr class="gradeX"> 
			<td>Misc</td> 
			<td>Dillo 0.8</td> 
			<td>Embedded devices</td> 
			<td class="center">-</td> 
			<td class="center">X</td> 
		</tr> 
		<tr class="gradeX"> 
			<td>Misc</td> 
			<td>Links</td> 
			<td>Text only</td> 
			<td class="center">-</td> 
			<td class="center">X</td> 
		</tr> 
		<tr class="gradeX"> 
			<td>Misc</td> 
			<td>Lynx</td> 
			<td>Text only</td> 
			<td class="center">-</td> 
			<td class="center">X</td> 
		</tr> 
		<tr class="gradeC"> 
			<td>Misc</td> 
			<td>IE Mobile</td> 
			<td>Windows Mobile 6</td> 
			<td class="center">-</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeC"> 
			<td>Misc</td> 
			<td>PSP browser</td> 
			<td>PSP</td> 
			<td class="center">-</td> 
			<td class="center">C</td> 
		</tr> 
		<tr class="gradeU"> 
			<td>Other browsers</td> 
			<td>All others</td> 
			<td>-</td> 
			<td class="center">-</td> 
			<td class="center">U</td> 
		</tr> 
	</tbody> 
	<tfoot> 
		<tr> 
			<th>Rendering engine</th> 
			<th>Browser</th> 
			<th>Platform(s)</th> 
			<th>Engine version</th> 
			<th>CSS grade</th> 
		</tr> 
	</tfoot> 
</table> 
			</div> 
			<div class="spacer"></div> 
			
			
			<h1>Initialisation code</h1> 
			<pre>$(':checkbox[name="rendering_filter"]').click(function() {
    var filter = '',
        regexFilter = true,
        smartFilter = false;

    filter = $('[name="' + this.name + '"]:checked').map(function () {
        return this.value;
    }).toArray().join('|');

    $('#example').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
});</pre> 
		</div> 
	</body> 
</html>
7

Hi Paul

You are a STAR!!! I’ve incorporated your javascript code into my page and it works fantastic. I have yet to do further testing and styling etc with real data but think I have no more hurdles to battle with.

Thank you so much, you have helped BIG TIME! Shame I can’t buy you a beer on this forum. :slight_smile:

8

Hi

Some time ago I was working with datatables and asked for help with how to implement checkboxes for filtering. I managed to implement it into a test table and all works great apart from one last hurdle I am trying to overcome to complete the project.

Supporting files attached.

My page now has two checkbox filters, one for the term column which works 100%, and one for the rating column. I basically copied the same function as the term column and changed the parametes for the rating column but the code loop is bahaving strangely and I cannot work out why. If you look at the attached code for the html file, you’ll see on line 155 what i’m doing. The data is held in an array from line 41.

If you filter by Term, it works great, but if you filter by rating, then it will only work with A+ and CCC. these are the only two. Can somebody please help me from pulling my hair out further by helping me see what the problem is? I am also wanting to do a filter for the currency column but again, it misbehaves with £ and $ symbols.

Many thanks for any help you can give.

9

The pluses are being interpreted as regular expression commands, instead of being actual text matching requirements.
There are a couple of things that we can do to help fix the problem.

Instead of searching for “A+”, which as a regular expression the plus means “one or more” , we will instead escape the plus signs and tell it to look for “A\\+” instead.
We can do that by changing the returned this.value to this instead:


return this.value.replace('+', '\\\\+');

Secondly, we can tell it to not match AA+ when it’s looking for A+ by ensuring that a full match from start to end of the string occurs.

We can do that by using this instead:

^A\\\\+$

The caret symbol and the dollar symbol help to ensure that only a full-string match occurs, so “A+” would match but “AA+” won’t match.

When multiple values are being matched, they will be separated by the pipe symbol

^(AA|A-)$

The parenthesis serve an important purpose here, because without them, ^AA|A-$ would search for ^AA or A-$ which is not what we want. Instead, we want to search for ^AA$ or ^A-$ which is what the parenthesis help us to achieve.

So after the filter has been created, we need to wrap it with the ^( and )$


filter = '^(' + filter + ')$';
10

Hi Paul

Thank you so much. You are truly a master at this. I’ll award you with the JavaScript Guru 2011 award!!!

I would never have known to use the carat symbol, you’ve saved me hours of headache.

Fantastic!!

11

Hi again

Although the page I now have works fantastic. I am now trying to improve it a little by adding one more checkbox for each filter section to select/deselect all checkboxes in that group. I have tried to use some code which successfully selects/deselects them but I can’t make the filters work using this method. I somehow need to incorporate the code within the function that modifies the datatable.

Using the code I previously attached I have added the following:

NEW FUNCTION

    $('#all').click(function(){
        $("#termbox INPUT[type='checkbox'][id!=all]").each(function(){
              if ($('#all').attr('checked')) {
                $('#termbox input[type=checkbox][id!=all]').attr('checked', 'checked');
              } else {
                $('#termbox input[type=checkbox][id!=all]').attr('checked', '');
              }
        });
    });

ADDED ID TO THE TERM CHECKBOX
<div class=“left1” id=“termbox”> (around line 466 in code).

ADDED THE CHECKBOX TO SELECT ALL
<li><input id=“all” type=“checkbox” value=“all” name=“rendering_filter” checked=“all”> All</li>

I’m on the right tracks (I think) but any help on how to add this to the function to actually change the datatable filter would be great.

Many thanks again.

12

Hi

As this post has been going for some time now, I wondered if my last post was seen by anyone? Or is the thread now closed?