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...');
});

No i don't have a fiddle. I have hard times dealing with dynamic data in fiddles — Griezmann
– Griezmann, Commented Dec 27, 2017 at 11:30
@dferenc, when i first created the table, it worked fine until when i started customizing it. Does the search need a plugin or something? — Griezmann
– Griezmann, Commented Dec 27, 2017 at 11:34
What is the version that you use for DataTable ? Above 1.10.x version will support search() method. — Subash
– Subash, Commented Dec 27, 2017 at 12:13

dferenc · Accepted Answer · 2017-12-27 17:02:54Z

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 = …;).

edited Dec 27, 2017 at 17:02

answered Dec 27, 2017 at 11:19

dferenc

8,13612 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Griezmann Over a year ago

It is still not filtering please

dferenc Over a year ago

I've updated the answer based on your comments. This is setup is working on my mockup now.

Collectives™ on Stack Overflow

Search not working in datatables - Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related