Datatable search box not working for table?

vikastech

Hi allen,
I am pupulating the data in table using ajax call I am able to populate but search, box is not working while I am searching there is no filtering is happening.
please tell what mistake I am doing.

Thanks

kthorngren

Do you have serverSide enabled?

If so your server side code is responsible for performing the search and providing the result.

Can you post a link to your page for troubleshooting?

Kevin

vikastech

"serverSide": true,
"stateSave": true,
"columns": [
{ "data": "Key" },
{ "data": "value" }],

          "ajax": {

              type : "POST",
                url : "data",
                async:false,
                success : function(response) {
                    $.each(response.key, function(i, item) {
                        keys.push(item);
                    });
                    $.each(response.value, function(i, item) {
                        values.push(item);
                    });
                }
          }
        } );
    /* $.ajax({
        type : "GET",
        url : "data",
        async:false,
        success : function(response) {
            $.each(response.key, function(i, item) {
                keys.push(item);
            });
            $.each(response.value, function(i, item) {
                values.push(item);
            });
        }
    }); */
    //console.log(keys);
    for ( var key in keys) {
        html = html + '<tr><td>' + keys[key] + '</td><td>' + values[key]
                + '</td></tr>';
    }
    $("#populate").append(html);

This is my code . I enabled serverSide attr true

kthorngren

It looks like you are populating the table with this code, is that correct?

for ( var key in keys) {
    html = html + '<tr><td>' + keys[key] + '</td><td>' + values[key]
            + '</td></tr>';
}
$("#populate").append(html);

You have this for your ajax config:

      "ajax": {
 
          type : "POST",
            url : "data",

Is "data" a valid URL? or did you change the text to post here?

What data is being returned from url : "data",?

If you are populating the table using the for loop above then Datatables does not know about the data in the table which is why things like search is not working. Datatables needs to populate the data.

Plus you have server side processing enabled so its expected that the server code (the code at url : "data",) will perform the search and provide the appropriate data in the response. Do you really need server side processing?
https://datatables.net/manual/server-side

Maybe you want something like this example where Datatables processes the ajax response and populates the table.
https://datatables.net/examples/ajax/objects.html

Also you will want to look at this doc to see how the ajax data needs to be returned to Datatables:
https://datatables.net/manual/data/

Kevin

vikastech

var html = '';
    var keys = new Array();
    var values = new Array();
    $('#tableOf').dataTable({
        "serverSide" : true,
        "stateSave" : true,
        "columns" : [ {
            "data" : "Key"
        }, {
            "data" : "value"
        } ],
        "ajax" : {
            type : "POST",
            url : "data",
            async : false,
            success : function(response) {
                $.each(response.key, function(i, item) {
                    keys.push(item);
                });
                $.each(response.value, function(i, item) {
                    values.push(item);
                });
            }
        }
    });

    for ( var key in keys) {
        html = html + '<tr><td>' + keys[key] + '</td><td>' + values[key]
                + '</td></tr>';
    }
    $("#populate").append(html);

sorry , I forgot to remove commented code ,
yes this is the code I am getting the response by ajax call "data" is url of my servlet.

{value: Array(18), key: Array(18)}

key:(18) ["1", "2", "3", "4", "5", "6", "7", "8", "9", "11", "21", "31", "41", "51", "61", "71", "81", "91"]

value:(18) ["Vikas", "Karan", "Anil", "Ajay", "Aakash", "Sanket", "Kamal", "Niket", "Jojo", "Vikas", "Karan", "Anil", "Ajay", "Aakash", "Sanket", "Kamal", "Niket", "Jojo"]

This response I am getting from server.

kthorngren

Can you return the data in a format supported by Datatables?
https://datatables.net/manual/data/

More like this:

[
    {
        "key":       "1",
        "value":   "Vikas",
    },
    {
        "key":       "2",
        "value":   "Kiran",
    },
.....
]

If you can change the returned structure to something Datatables supports then you can eliminate the Ajax async and success options and remove the need of the for loop. Allowing Datatables to populate the data. But you will need to set ajax.dataSrc to "", for example:

        "ajax" : {
            type : "POST",
            url : "data",
            dataSrc : "",
          }

How many rows of data are you expecting in production?

Based on what is being returned it doesn't seem like your server code supports server side processing. If the amount of data allows you will be better off having all the data at the client.

Kevin