JQuery Datatables scrollbar and column search not working

Question

I am using JQuery DataTables and trying to add a scrollbar to fit in the screen as well as column search in the header. It is breaking the header (if I click on the ordering, then my custom headers are gone) and the search doesn't work (happens only when the scrollbar is there).

My code (don't change the html as I am adding all data dynamically):

var table = $('#example').DataTable({
  "scrollX": true,
});

$('#example thead th').each(function() {
  var title = $(this).text();
  $(this).html('<input type="text" placeholder="' + title + '" />');
});

table.columns().every(function() {
  var that = this;

  $('input', this.header()).on('keyup change', function() {
    if (that.search() !== this.value) {
      that
        .search(this.value)
        .draw();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Fiddle

beaver · Accepted Answer · 2018-01-29 10:37:32Z

You need to call DataTable() after having added the elements for column filtering, otherwise DataTables plugin will modify your HTML on search, ordering, updating...

So you could add input field to a new row, prepended to column headers:

// Create search header
var new_row = $("<tr class='search-header'/>");
$('#example thead th').each(function(i) {
  var title = $(this).text();
  var new_th = $('<th style="' + $(this).attr('style') + '" />');
  $(new_th).append('<input type="text" placeholder="' + title + '" data-index="'+i+'"/>');
  $(new_row).append(new_th);
});
$('#example thead').prepend(new_row);

// Init DataTable
var table = $('#example').DataTable({
  "scrollX": true,
  "searching": true
});

// Filter event handler
$( table.table().container() ).on( 'keyup', 'thead input', function () {
  table
    .column( $(this).data('index') )
    .search( this.value )
    .draw();
});

.search-header {
    background: #dcdcdc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Here is also your fiddle updated: http://jsfiddle.net/beaver71/1pede2q3/

If you could change your HTML footer here is a solution proposed on DataTables docs showing column searching text inputs at the bottom: https://www.datatables.net/release-datatables/examples/api/multi_filter.html

This resets the custom thead elements I create on table init

Trevor Atlas · Accepted Answer · 2018-01-26 14:25:23Z

0

This is happening because jquery datatables has no knowledge of the <input/> fields you are adding, so they are removed any time the table structure needs to change. You need to place those outside the table structure or find another way to implement that feature.

answered Jan 26, 2018 at 14:25

Trevor Atlas

7887 silver badges14 bronze badges

Collectives™ on Stack Overflow

JQuery Datatables scrollbar and column search not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related