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.

Answer 1

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.

Answer 2

You can by modifying datatables oLanguage sSearch option:

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