dataTable.columns(0).search('search-term').draw() does not populate columns[0][search][value]

athar258

Hi. I have been banging my head since 2 days on an issue which appears to be very simple and has plenty of help available but I can't get it to work. I m trying to do a server side search on each column of the grid and when I call dataTable.columns(0).search('search-term').draw() the POST request it generates always has the columns[0][search][value] empty.

Below are the two approaches I tried over and over trying different things and neither of these work for me, clearly there is something I am missing.

I also attached a snapshot for clarity, also, below is the full configuration of my DataTable, can anybody please point me what am I doing wrong.

Approach #1

initComplete: function () {

        $('.scheduling-search')
            .on('keyup change', function () {
                var i = $(this).attr('data-column');
                var v = $(this).val();
                schedulingGrid.columns(i).search(v).draw();
            }
        );
    }

Approach #2

schedulingGrid.columns().every( function () {
    var column = this;
    $( 'input', this.footer() ).on( 'keyup change', function () {
        column
            .search( this.value )
            .draw();
    } );
});

Here is the full configuration of my DataTable

var schedulingGrid = $('#scheduling-manager-grid').DataTable({
    processing: true,
    searchDelay: 1000,
    pageLength: {$pageSize},
    paginate: true,
    lengthChange: false,
    filter: false,
    info: true,
    autoWidth: false,
    serverSide: true,
    order: [[3, '{$defaultSortOrder}']],
    language: {
        paginate: {
            next: '',
            previous: ''
        }
    },
    ajax: {
        type: 'post',
        url: '{$url}',
    },
    columns: [
        {
            width: '40px',
            data: 'briefingId',
            name: 'id',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'briefingTitle',
            name: 't.title',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'dateSubmitted',
            name: 't.created_at',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'preferredDate',
            name: 't.preferred_date',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'requesterName',
            name: 't.requestor_name',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'briefingStatus',
            name: 't.briefing_status_id',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'briefingType',
            name: 't.briefing_type_id',
            searchable: true,
            orderable: true
        },
        {
            data: 'notes',
            name: 'notes',
            searchable: true,
            orderable: false
        }
    ],
    initComplete: function () {

        $('.scheduling-search')
            .on('keyup change', function () {
                var i = $(this).attr('data-column');
                var v = $(this).val();
                schedulingGrid.columns(i).search(v).draw();
            }
        );
    }
});

And the HTML goes like

<table id="scheduling-manager-grid">
  <thead>
    <tr>
      <th>Briefing ID</th>
      <th>Briefing Title</th>
      <th>Date Submitted</th>
      <th>Preferred Briefing Date</th>
      <th>Requestor Name</th>
      <th>Briefing Status</th>
      <th>Briefing Type</th>
      <th>Notes</th>
    </tr>
  </thead>
  <thead>
    <tr>
      <td><input style="width: 50px;" type="text" data-column="0" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="1" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="2" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="3" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="4" class="scheduling-search"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </thead>
</table>

athar258

There are the answers I have been following along with many other...
https://coderexample.com/datatable-custom-column-search/
https://datatables.net/forums/discussion/22431/per-column-searching-not-working
https://datatables.net/forums/discussion/31978/why-is-the-column-search-not-working-after-i-implemented-german-json-file

allan

filter: false,

Remove that. It is disabling filtering. It is an alias for searching for legacy reasons.

Allan

athar258

OMG. I can't believe it was that simple... Thanks allan for solving this, you saved me a lot of frustration.

I'm sure you get it a lot but you have a great plugin..

athar258

Just wondering, is this documented anywhere? I think I read lots of documentation and if its there, I clearly missed it. Thanks.

allan

Not directly. The reason that filter isn't documented anywhere (I'm not sure where you got it from) is that it comes about from the support for the old Hungarian notation. Rather than having a static list of how all the Hungarian and camelCase options and how they map, DataTables does it programmatically. So the legacy bFilter option can be mapped to just filter.

But for naming consistency DataTables 1.10+ uses the term search for the built in search options (hence searching).

So doing filter: false was the same as searching: false - which means DataTables ignores search terms.

Regards,
Allan

edit No idea how I'd document that :-). But then, you were using an undocumented option!

athar258

Got it. When I started using datatables last week, I read somewhere that bFilter. can be used to get rid of the global search. Then for some really weird reason I changed it to 'filter'.

Its all good now. Thanks again for the explanation.

allan

It doesn't just get rid of the global search input, but disables filtering completely (to be honest, you aren't the first to stumble over that aspect - sorry). Use the horrible dom option to remove the global search input (or CSS) while leaving the search enabled.

Allan