Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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 |
Comments
Comment #1
duellj CreditAttribution: duellj commentedThanks 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 commentedThis 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 commentedAwesome 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 commentedAfter 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 commentedHello,
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 commentedHi,
is there a ported version of this patch for the Drupal 7 ? That would be very nice.
Comment #7
morybel CreditAttribution: morybel commented+2 for a D7 port of this patch... I would love that functionnality as well.
Thanks.
Comment #8
morybel CreditAttribution: morybel commentedWell, 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.
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 commentedAlso 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:
Comment #10
kenorb CreditAttribution: kenorb commentedComment #11
josephcheekI 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.
Comment #12
dqdof #1029614: Support DataTables individual column filtering