Search not working in datatables - Jquery

Question

My datatable is filled with inputs from the server side but unfortunately my search box is not filtering my data. When i search on page 1, it doesn't filter. When i move to page 2 of the pagination and start searching in the box, it automatically moves me to page 1 again.

There's no error showing in the console as well to give me a hint. What could be causing this please?

PS: I am using yajra package datatables.

JS Scripts

$(document).ready(function() {
    oTable = $('#users-table').DataTable({
        "processing": true,
        "serverSide": true,
        "bProcessing":false,
        "bSort":false,
        "ajax": "{{ route('datatable.getcategories') }}",
        "columns": [
            {data: 'check', name: 'check'},      
            {data: 'name', name: 'name'},
           // {data: 'description', name: 'description'},
            {data: 'count', name: 'count'},
            {data: 'action', name: 'action'}        
        ],
        language: { search: "" },
    });

    $('.dataTables_filter input[type="search"]')
        .attr('placeholder','  Search...');
});

Answer 1

Apparently you have chosen server side processing by setting serverSide to true. With that every time you type something into the search field, an ajax request is sent to the server with the value of the search field and it is the task of the server to respond with the filtered dataset. However, based on your comments, I assume that you had the default client side processing working earlier and your server has not been prepared to do the processing. To have the filtering processed on the client side, you can simply comment out the "serverSide": true, line, like so:

var oTable = $('#users-table').DataTable({
    'processing': true,
    // 'serverSide': true,// false is the default
    'bProcessing':false,
    'bSort':false,
    'ajax': "{{ route('datatable.getcategories') }}",
    'columns': [
        {data: 'check', name: 'check'},      
        {data: 'name', name: 'name'},
       // {data: 'description', name: 'description'},
        {data: 'count', name: 'count'},
        {data: 'action', name: 'action'}        
    ],
    language: { search: '' },
});

Please note that you should declare the variable oTable with var in order to not create it as a global variable (var oTable = …;).