Datatables modify filter html

Question

I'm using the jQuery Datatables plugin and I would like to customize some of the generated HTML for the filter.

Specifically, they generate the following HTML:

<div class="dataTables_filter" id="example_filter">
<label>Search: <input type="text" aria-controls="example"></label>

However, I would like my HTML to be more like this:

<div class="filter-search">
<label class="search-label">
    <input type="text" placeholder="Search by name" />
    <span class="search-icon"></span>
</label>

I've looked around and all I could find was something about changing the class, but in this case I want to change more than just the class.

I'm sure I can hack at the DOM after the table loads, but I was hoping there would be some way to do this as part of the config/initialization of the Datatable.

Daniel · Accepted Answer · 2015-09-30 14:18:57Z

6

You can by modifying datatables oLanguage sSearch option:

$('#example').dataTable({
    oLanguage: {
        sSearch: '<i>Other Search Text</i>'
    }
});

answered Sep 30, 2015 at 14:18

Daniel

991 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sofia Pahaoja Over a year ago

Nowadays the option is just language.search. Documentation: datatables.net/reference/option/language.search

Community · Accepted Answer · 2017-05-23 12:09:16Z

3

Without messing with the DOM after table load, I don't think there is a way to "change" the markup datatables generates for the filter without hacking the datatables plugin itself.

However, one decent alternative would be to simply implement your own search filter.

To make a custom filter OUTSIDE the datatables markup:

Step 1:

Omit the 'f' portion of the sDom parameter: https://datatables.net/usage/options

Step 2:

Write your own markup for a search field

Step 3:

Use something similar to the accepted answer for this question to actually filter on your own custom search field: Datatables - Search Box outside datatable

Otherwise, you're left with just making custom css rules for the markup generated by 'f' and/or moving it around.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 14, 2014 at 14:41

Jakotheshadows

1,5252 gold badges13 silver badges25 bronze badges

2 Comments

Scott Dietrich Over a year ago

After hunting around this seems to one of the more viable solutions. In the end I wrote 3 lines of JavaScript to modify the DOM and I got what I wanted.

Scott Dietrich Over a year ago

At first the sDom looked promising, but then it only affects the things around it. Making a plug in is an option, but more complicated for my needs at the moment.

Collectives™ on Stack Overflow

Datatables modify filter html

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related