SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery datatable

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdagger View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code javascript:
    <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.

    Code javascript:
    $('#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.

    Code html4strict:
    <!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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Files Attached Files

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code javascript:
    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:

    Code:
    ^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

    Code:
    ^(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 )$

    Code javascript:
    filter = '^(' + filter + ')$';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •