Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.How can I use the "Individual column searching" function for Drupal 8? I have seen that there is a patch for Drupal 7.
Thx
https://www.datatables.net/examples/api/multi_filter.html
jQuery(document).ready(function() {
// Setup - add a text input to each footer cell
jQuery('#datatable tfoot th').each( function () {
var title = jQuery(this).text();
jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = jQuery('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
jQuery( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
I have integrated the javascript file into the website. But then I get the following error:
jquery.min.js?v=3.2.1:2 jQuery.Deferred exception: table.columns is not a function TypeError: table.columns is not a function
at HTMLDocument.<anonymous> (http://landwehrcie.de/themes/contrib/zurb_foundation/js/init_datatables.js?v=8.7.8:12:9)
at j (http://landwehrcie.de/core/assets/vendor/jquery/jquery.min.js?v=3.2.1:2:29999)
at k (http://landwehrcie.de/core/assets/vendor/jquery/jquery.min.js?v=3.2.1:2:30313) undefinedThank you for your help
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | datatables-multifilter-3091230-8-10.interdiff.txt | 8.7 KB | anybody |
| #10 | datatables-multifilter-3091230-8.patch | 11.02 KB | patacard |
| #8 | datatables-multifilter-3091230-7.patch | 6.71 KB | patacard |
| #6 | datatables-multifilter-3091230-6.patch | 4.94 KB | aleix |
Issue fork datatables-3091230
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
bavramor commentedComment #3
isalmanhaider commentedComment #4
avpadernoComment #5
dqdTo answer the question: We need a reroll of that patch you mentioned for D8. Link to the patch? Please reference the former issue and patch here for others to be able to chime in for a reroll.
Comment #6
aleixI have adapted patch from https://www.drupal.org/project/datatables/issues/980424 to 2.x code, and positioned before table as there's no footer row in views tables.
Comment #7
patacard commentedHey Aleix,
Patch looks great - installed just fine.
On initial load of the view - without the multi-filter setting enabled get an error: (after enabling multi-filter it went away)
Notice: Undefined index: multi_filter in template_preprocess_views_view_datatables() (line 47 of modules/contrib/datatables/datatables.module).
Anyway to make each column have a toggle for having a filter? Right now it's all or nothing. Would be nice to select which columns should have filters.
Thanks for the patch!
Comment #8
patacard commentedI put together the following patch that introduces the option to toggle specific column filtering and moved the filters into a tfoot area.
Comment #10
patacard commentedI went ahead and made some updates. Updated the column filter fields to select lists using DataTables APIs (source: https://www.datatables.net/examples/api/multi_filter_select.html)
I also went ahead and added a text field under the DataTables settings that allows for additional custom configurations.
Comment #11
dqdJust some nitpicking: please no NL on EOL and there are some unwanted empty lines regarding Drupal coding standarts occuring later on below that line.
Apart from that, awesome work is going on here! +1!
Please let's keep it clean and lert's patch against latest dev. I will merge the latest fixes than for the next 2.1 release.
Comment #12
dqdComment #13
dtarc commentedI was able to get the patch in #8 running but could not get the patch in #10 to work. It applied to the latest dev but the select filters just wouldn't seem to display.
Comment #14
anybodyHaving the same requirement, I'll pick this up and finalize it.
I had a look at patches #8 and #10 and dislike the complexity of #10. As DataTables is a JavaScript solution, and we want to add some JS sugar functionality here, we should not overwrite the whole template file for this.
I may change my mind later on, but I don't think it's worth it, if it can be solved in JavaScript like the whole library, see https://datatables.net/examples/api/multi_filter_select.html
So I'll base my implementation on #8, not on #10 and will create an issue fork for that.
Comment #15
anybodyHere's the interdiff from #8 and #10 FYI, I'll try to take the best from both worlds in the MR.
Comment #16
anybodyComment #17
anybodyComment #18
anybodyI decided to implement the settings like hidden_columns to stick to existing form structure & implementation.
Comment #20
anybodyIMPORTANT:
(Source: https://datatables.net/reference/option/searching)
So I made the options dependent and added a highlighted information on that. The search input can be hidden by sDOM value.
Comment #21
anybodyWorks quite nice, ready for review :) Please have a try!
Would be cool to get this into 2.0.1!
Comment #22
thomas.frobieterThe responsive style inside the TH is still problematic, our goal was to have the label aligned top and the filter field aligned bottom.
Sadly we are not able to set the new .filter-column__title-filter-wrapper to 100% height of the TH and use Flexbox to align the contents.
So it seems, the only unhacky solution here is vertical-align:bottom on the TH, so label + filter field are aligned bottom.
However, the rest looks fine to me - if the CSS styles not part of this issue: +1 RTBC.
Comment #23
dqdAwesome progress here and thanks @ all working on this! Sorry for being late to chime in as co-maintainer. Will review asap now and commit.
Comment #24
anybodySuuuuuper cool @diqidoq! We're successfully using this on several projects FYI. :)
Comment #26
dqdSorry for being late ... again... finally merged/pushed! And upcoming release will have this awesome work done here being added. Thanks @ all and a belated HAPPY NEW YEAR.