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.

score 6 · Answer 1 · answered Sep 30 '15 at 14:18

6

You can by modifying datatables oLanguage sSearch option:

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

answered Sep 30 '15 at 14:18

Daniel

99
1
2

Nowadays the option is just `language.search`. Documentation: https://datatables.net/reference/option/language.search – Samuli Pahaoja Jul 18 '17 at 09:23

score 3 · Accepted Answer · edited May 23 '17 at 12:09

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 '17 at 12:09

Community

1
1

answered Feb 14 '14 at 14:41

Jakotheshadows

1,485
2
13
24

1

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 Feb 14 '14 at 16:49
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. – Scott Dietrich Feb 14 '14 at 16:53

Datatables modify filter html

2 Answers2