Datatables change html filter

Question

I am using the jQuery Datatables plugin and I would like to customize part of the generated HTML for the filter.

In particular, 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 looked around, and all I could find was something about changing the class , but in this case I want to change not only the class.

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

Answer 1

DOM , , "" , , datatables.

.

datatables:

1:

"f" sDom: https://datatables.net/usage/options

2:

3:

- , : Datatables - datatable

CSS , "f" / .

Answer 2

datatables oLanguage sSearch:

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