DataTables logo DataTables

via Ad Packs
row filter from TableTools button
  • dnagirldnagirl
    Posts: 34
    I have a table that holds a daily calendar. I want to use a TableTools button to toggle the visibility (ie filtre) rows that have the class 'nonworkhour'. The text of the button should toggle from "Show Work Hours" to "Show All Hours" depending on whether the filter is active.

    I've tried adding the following fnClick functions to my button to get the functionality that I want. None work.

    'fnClick': function(nButton, oConfig, oFlash){

              if(oConfig.sButtonText='Show Work Hours'){
            	  oConfig.sButtonText="Show All Hours";
            	  $("tr.nonworkhour").hide();
              } else {
            	  oConfig.sButtonText="Show Work Hours";
            	  $("tr.nonworkhour").show();
              };
              	oTable.fnDraw();
}


    function(nButton, oConfig, oFlash){
        	  $(nButton).toggle(
            		function(oConfig){
            			oConfig.sButtonText="Show Work Hours";
            			$("tr.nonworkhour").show();
            		},
            		function(oConfig){
            			oConfig.sButtonText="Show All Hours";
            			$("tr.nonworkhour").hide();
            		}
            	);
              	oTable.fnDraw();
}

    and variations.



    This is the table html:

    		<table class="day">
			<caption>
				Friday, <a
					href="calendar.php?date=2012-06-15&amp;per=m">June</a>&nbsp;15,
				<a
					href="calendar.php?date=2012-06-15&amp;per=y">2012</a>
			</caption>
			<thead>
				<tr>
					<th class="number">Hour</th>
					<th>General</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="number"><a href="admin/events/index.php?date=2012-06-15">All
							Day</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=0:00">0:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=1:00">1:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=2:00">2:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=3:00">3:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=4:00">4:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=5:00">5:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=6:00">6:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=7:00">7:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=8:00">8:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=9:00">9:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=10:00">10:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=11:00">11:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=12:00">12:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=13:00">13:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=14:00">14:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=15:00">15:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=16:00">16:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=17:00">17:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=18:00">18:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=19:00">19:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=20:00">20:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=21:00">21:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=22:00">22:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
				<tr class="nonworkhour">
					<td class="number"><a
						href="admin/events/index.php?date=2012-06-15&amp;ev_starttime=23:00">23:00
					</a></td>
					<td>&nbsp;</td>
				</tr>
			</tbody>
		</table>
  • allanallan
    Posts: 15,883
    This is certainly possible, however, the way to do it is not to show an hide DOM elements, as that will break DataTables display - DataTables adds and removes elements from the DOM as needed by sorting, paging and filtering, rather than showing / hiding them.

    What you need here is to use custom row based filtering ( http://datatables.net/development/filtering#row_filters ) and then have the TableTools button toggle a flag that will tell the filter if it should remove rows with the class or not (then just call fnDraw to have the filter applied) :-)

    Allan
  • dnagirldnagirl
    Posts: 34
    Thanks for the pointer. My main stumbling block was the requirement to set a flag. This is my solution:

    Filter
    $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex ) {
	var filter= $('#workhourfilter').val();
	var tr = $('tr', $('table.day tbody'))[iDataIndex];
	if(!filter) {
		return $(tr).hasClass('nonworkhour') ? false : true;
	}
	return true;
});

    TableTools button
    {'sExtends': 'text',
      'sButtonText': 'Show All Hours',
      'sButtonClass': 'DTTT_button ui-button ui-state-default',
      'sButtonClassHover': 'DTTT_button ui-button ui-state-default ui-state-hover',
      'fnInit': function(nButton, oConfig) {
			$(oTable).append('<input type="hidden" name="workhourfilter" id="workhourfilter" value="true"/>'); //holds filter flag
       },
      'fnClick': function(nButton, oConfig, nRow){
			if(oConfig.sButtonText=='Show Work Hours'){
				oConfig.sButtonText='Show All Hours';
				$('#workhourfilter').val(true);
			}else{
				oConfig.sButtonText='Show Work Hours';
				$('#workhourfilter').val(false);
			}
			$(nButton).text(oConfig.sButtonText);
			oTable.fnDraw();
      }
}
  • allanallan
    Posts: 15,883
    Look good - nice one! And thanks for sharing your solution with us.

    Regards,
    Allan
This discussion has been closed.
← All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion