DataTable Searching and Sorting not working on Dynamically loaded data

Sunshine89

I have a DataTable where I need to insert/append data dynamically from an AJAX call. Searching and Sorting on this kind of DataTable does not seem to work as intended. https://jsfiddle.net/sg8o8vpv/

Code:

$('#example').DataTable( {
       "iDisplayLength": 10,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "aaData": md,
        "aaSorting": [[1, 'asc']],
        "createdRow": function (row, data, index) {
                $('td', row).eq(0).append('<u><a target="_blank" href="' + data["Data"][0].Link + '">' + data["Data"][0].Value + '</a></u>');
                $('td', row).eq(1).append(data["Data"][1].Value);
                $('td', row).eq(1).prop('title', data["Data"][1].Value);
                for (var i = 2; i < data["Data"].length; i++) {
                    if (data["Data"][i].Value == "green") {
                        $('td', row).eq(i).addClass('highlight1');
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
                    else if (data["Data"][i].Value == "red") {
                        $('td', row).eq(i).addClass('highlight3');
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
                    else if (data["Data"][i].Value == "blue") {
                        $('td', row).eq(i).addClass('highlight2');
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
                    else{
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
              }
        },
        "scrollX": true,
        "scrollCollapse": true,
        "fixedColumns": {
           "leftColumns": 2,

        },
        "sScrollXInner": "150%",
        "fixedHeader": true,
        "columnDefs": [{
            "defaultContent": "",
            "targets": "_all",
            "data": null,
            "render":  {
              //  "_":spData[0].Cells[2].Value,
            }
        }],
    } );

Please suggest any ideas or solution to this issue! Thank you!

Tom (DataTables)

The problem is that you've set columns.data to be null so datatables is not seeing any data. You need to use this option so that datatables can cache the relevant data.

Thanks

Tom

Sunshine89

Thanks for the suggestion @Tom (DataTables) .As the number of columns and the column data would depend on the AJAX call and would be dynamically inserted, I could not specify columns.data to get to the solution.Although I found a work around to the issue. Here's a solution to my question.

Thank you!