How to create a specific html structure for datatables search bar?

问题

I'm trying to add this structure to the searchbar:

<div class="app-search">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search...">
      <span class="mdi mdi-magnify"></span>
      <div class="input-group-append">
          <button class="btn btn-primary" type="submit">Search</button>
      </div>
    </div>
  </form>
</div>

Actually I tried to add this code to my datatables:

$("#example-datatable").DataTable({
    keys: !0,
    "dom": '<"input-group"f><"#toolbar.dt-box">lrtip',

but the result is completely wrong as you can see from this JSFIDDLE.

The final result should be this:

What I did wrong?

回答1:

I am not able to explain what is wrong in your code, but I can share my solutions for this. I hope it will drive you to the right solution.

By adding this to your table object, you are able to delete "Search:" before the input:

let table = $('#example').DataTable( {
 language: { search: "" }
});

You can run this function to be able to change the input's placeholder:

$('.dataTables_filter input').attr("placeholder", "SEARCH");

You can also replace all input element using this function:

$('.dataTables_filter label').html('<input type="search" class="" placeholder="I am the new input" aria-controls="example">');

https://jsfiddle.net/0da982ue/9/

来源：https://stackoverflow.com/questions/52254517/how-to-create-a-specific-html-structure-for-datatables-search-bar