How to implement multi_filter [#980424]

So I needed to implement this:
http://www.datatables.net/examples/api/multi_filter.html

Here is how I did it.

Edit: datatables-view.tpl.php
Add this code:

<tfoot>
	<tr>
	<?php foreach ($header as $field => $label): ?>
		<th>
			<input type="text" name="<?php print $field; ?>" value="<?php print $label; ?>" class="search_init" />
		</th>
	<?php endforeach; ?>
	</tr>
</tfoot>

And then add this to the top of datatables.js.

var asInitVals = new Array();

$(document).ready(function() {

	var oTable = $('#datatable-1').dataTable();

	$("tfoot input").keyup( function () {
		/* Filter on the column (the index) of this element */
		oTable.fnFilter( this.value, $("tfoot input").index(this) );

	} );

	/*
	 * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
	 * the footer
	 */
	$("tfoot input").each( function (i) {
		asInitVals[i] = this.value;
	} );

	$("tfoot input").focus( function () {
		if ( this.className == "search_init" )
		{
			this.className = "";
			this.value = "";
		}
	} );

	$("tfoot input").blur( function (i) {
		if ( this.value == "" )
		{
			this.className = "search_init";
			this.value = asInitVals[$("tfoot input").index(this)];
		}
	} );

} );

I hope this helps someone. And maybe it could even make it into core at some stage as a selectable option.

Comment	File	Size	Author
#2	datatables-multifilter.patch	4.84 KB	hutch120

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

duellj CreditAttribution: duellj commented 30 November 2010 at 18:08

Thanks hutch120 for the great writeup! This wouldn't be too difficult to integrate into the module as a selectable option. Want to contribute a patch with what you've got so far?

Comment #2

hutch120 CreditAttribution: hutch120 commented 8 December 2010 at 02:34

Status:

Active

» Patch (to be ported)

File	Size
datatables-multifilter.patch	4.84 KB

This patch adds a checkbox to the datatables widgets section (in views) and applies the code to enable multi-filter if you tick that box.

I only tested this patch with 6.x.1.x-dev.

It is the first drupal patch I've ever made, feedback welcome.

I put some notes about how to make a patch here:
http://www.clearlysecure.com.au/node/72

Comment #3

westie CreditAttribution: westie commented 27 January 2011 at 09:42

Awesome Module, cant wait until the patch is ported as the filter per column is really useful. I checked out the latest dev locally too, the scope of next release looks great.

Why is the pagination spans and not links? Also could "search" not be renamed "filter"?

Comment #4

hutch120 CreditAttribution: hutch120 commented 1 February 2011 at 03:31

After implementing this our team wanted the filters at the top of the table, a search of datatables.net revealed a forum post where this had been implemented. Basically it involves putting a TR element and TD elements in thead rather than tfoot, which might seem obvious but I initially tried TR/TH which didn't work. See link below for details.

Updating the datatables drupal integration above is done simply by moving the creation of the TR/TD elements from tfoot to thead and changing the "tfoot input" references to "thead input". Additionally I added a size attribute to the input box to avoid overflow.

References:
http://datatables.net/forums/comments.php?DiscussionID=89&page=1

Comment #5

jbfelix CreditAttribution: jbfelix commented 26 August 2011 at 09:24

Hello,

I am using multi filter on this page: http://studyinbelgium.be/fr/test2
But i would like to have a select dropdown list the column filters in place of free text filter (like here: http://www.datatables.net/examples/api/multi_filter_select.html)
Could you help me ?

Comment #6

bavramor CreditAttribution: bavramor commented 5 February 2014 at 15:44

Hi,

is there a ported version of this patch for the Drupal 7 ? That would be very nice.

Comment #7

morybel CreditAttribution: morybel commented 2 July 2014 at 19:04

+2 for a D7 port of this patch... I would love that functionnality as well.

Thanks.

Comment #8

morybel CreditAttribution: morybel commented 3 July 2014 at 15:11

Well, I managed to get this working after all.

The only thing I did is changed this line on the patch
/cvs/drupal-contrib/contributions/modules/datatables/js/datatables.js
from
+ if (this.bMultiFilter) {
to
+ if (settings.bMultiFilter) {

I still get an error when the Multifilter check box is not on.

Notice: Undefined index: multi_filter in template_preprocess_datatables_view() (line 321 of /home/mysite/public_html/sites/all/modules/datatables/datatables.module).
Notice: Undefined index: multi_filter in include() (line 42 of /home/mysite/public_html/sites/all/modules/datatables/views/datatables-view.tpl.php).

But I will use this functionnality on all my tables, so this is not a real problem. If anyone managed to clear this out, I'm a taker.

Cheers.

Comment #9

morybel CreditAttribution: morybel commented 3 July 2014 at 16:35

Also like hutch120 I moved the search in the header part and added a style to the search input to avoid overflow as I'm working with the show/hide plugin and my tables get overcrowed when I show all the columns.

My code looks like this in datatables-view.tpl.php:

<style>
.search_init  {width: 100%;}
</style>
<table id="<?php print $id ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php if (!empty($title)) : ?>
    <caption><?php print $title; ?></caption>
  <?php endif; ?>
  <?php
	$options = $view->style_plugin->options;
	if ($options['elements']['multi_filter']) { ?>
  <thead>
  <tr>
		<?php foreach ($header as $field => $label): ?>
			<th><input type="text" name="<?php print $field; ?>" value="<?php print "Search in: "; print $label; ?>" class="search_init" /></th>
		<?php endforeach; ?>
		</tr>
    <tr>
      <?php foreach ($header as $field => $label): ?>
        <th class="views-field views-field-<?php print $fields[$field]; ?>">
          <?php print $label; ?>
        </th>
      <?php endforeach; ?>
    </tr>
    
  </thead>
  <?php } ?>
  <tbody>
    <?php foreach ($rows as $count => $row): ?>
      <tr class="<?php print implode(' ', $row_classes[$count]); ?>">
        <?php foreach ($row as $field => $content): ?>
          <td class="views-field views-field-<?php print $fields[$field]; ?>">
            <?php print $content; ?>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

Comment #10

kenorb CreditAttribution: kenorb commented 21 April 2016 at 15:46

Version:

6.x-1.x-dev

» 7.x-2.x-dev

Comment #11

josephcheek

Provo, UT

CreditAttribution: josephcheek at GDG Webworks for Radius Advertising commented 31 January 2017 at 01:47

I rolled a patch for 7.x-2.x using a combination of code from this issue and https://www.drupal.org/node/1029614. The patch is included in the other issue at https://www.drupal.org/files/issues/datatables-1029614-6.patch but I think it works for this issue too (they are probably dupes of each other afaict).

I will probably move the filters into the header as well (they are in the footer in my patch) so check for an update. My customer also wants the filters to be dropdowns, not textfields, so I will see if i can do that too.