DataTable serverside processing search

2.7k Views Asked by At

I want to add search option to my dataTable. I'm using 1.10.13 serverside processing option.

here is the js code I have tried:

  var thisTable = $('#users).DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "type": "GET",
            "url": "/user/userda",
            "dataSrc": "data",
            "contentType": "application/json; charset=utf-8",
            "dataType": "json",
            "processData": true
        },
        "fnDrawCallback": function () {
            console.log(this.fnSettings().fnRecordsTotal());
        },
        "columns": [

            {"data": "name"},
            {"data": "email"},
            {"data": "company"},
            {"data": "usersgroup"},
            {"data": "regdate"}

        ]
    });

below is my view search input:

I want to bind below field with datatable and do the search. Please advice me

  <div class="filterPart">
        <label>Search</label>
        <input id="search" value="<?php echo $search; ?>" placeholder="Keyword" type="text" class="customfilters" />
    </div>
    <div class="filterPart lastLogin">
        <label>Registration</label>
        <input id="custom_registration_date1" readonly="readonly" value="<?php echo $registrationDateFrom; ?>"  data-target-input="registration_date1" name="custom_registration_date1" placeholder="From">
        <input id="custom_registration_date2" readonly="readonly" value="<?php echo $registrationDateTo; ?>"  data-target-input="registration_date2"  name="custom_registration_date2" placeholder="To">
    </div>
1

There are 1 best solutions below

1
On

To perform global search using your external input:

$('#search').on('keyup click', function (){
    $('#users').DataTable().search(this.value).draw();
});

See Global search example for more details.