Bootstrap datatable not working after loading data using ajax json

Question

I'm loading data dynamically to html table as below Technology stack used is: Spring MVC Hibernate Ajax JQuery But the datatable functionalities are not responding

function getdata()
     {
            $.ajax({

            type: "GET",
             url: "/controllerURL.html", //controller URL
             contentType: "application/json; charset=utf-8",
             dataType: "json",    

             success: function (results) {
                console.log(results)
                 var success = results.success;
                if(success){
                var finaldata = "<tbody><thead><tr><th>ID</th><th>data1</th><th>data2</th><th>Update</th></tr></thead>"; //data
                var data = results.message;
                    data = jQuery.parseJSON(data);
                alert(data);
                    for(var i = 0; i < data.length; i++){
                        var value = data[i];                
                        finaldata = finaldata+  "<tr><th>"+value.ID+"</th><th>"+value.variable1+"</th><th>"+value.variable2+"</th></tr>";
                                                    }
                    finaldata = finaldata + "</tbody>";
                $("#tableID").html(finaldata);
                $("#tableID").DataTable();//re-intializing datatable
                 }            
             },
             error: function (data) {       
                alert("fail");
             console.log('ajax call error');    

             }
         });
     }

After this datatable functionalities are not working

"After this datatable functionalities are not working"?? Can you explain what isn't working and when? — An0nC0d3r
– An0nC0d3r, Commented Jan 4, 2016 at 16:42
But you haven't posted any code relating to any "search" or "pagination? Are you seeing errors in the console then? You need to help us help you! — An0nC0d3r
– An0nC0d3r, Commented Jan 4, 2016 at 16:51
datatable is a plugin in jquery which offers you automated functionalities such as pagination, serach, filtering to your html table — Rohin
– Rohin, Commented Jan 4, 2016 at 16:53

Gyrocode.com · Accepted Answer · 2016-01-04 17:43:21Z

You need to have proper table structure with <thead></thead> and <tbody></tbody>. Also number of th elements should match number of td elements.

Assuming that other parts of your code work correctly, use the code below instead:

function getdata() {
    $.ajax({
        type: "GET",
        url: "/controllerURL.html", //controller URL
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function(results) {
            console.log(results)
            var success = results.success;
            if (success) {
                var finaldata = "<thead><tr><th>ID</th><th>data1</th><th>data2</th><th>Update</th></tr></thead><tbody>"; //data
                var data = results.message;
                data = jQuery.parseJSON(data);
                alert(data);
                for (var i = 0; i < data.length; i++) {
                    var value = data[i];
                    finaldata = finaldata + "<tr><td>" + value.ID + "</td><td>" + value.variable1 + "</td><td>" + value.variable2 + "</td><td></td></tr>";
                }
                finaldata = finaldata + "</tbody>";
                $("#tableID").html(finaldata);
                $("#tableID").DataTable();
            }
        },
        error: function(data) {
            alert("fail");
            console.log('ajax call error');

        }
    });
}

Siva Anand · Accepted Answer · 2016-08-04 12:15:50Z

$.ajax({..

 success: function(data) {..  

var table = $('#datatable').DataTable();
table.clear().draw();
var rowNode= new Array();
for (var key=0, size=data.length; key<size; key++){
            var j = -1;
            var r = new Array();
// represent columns as array
                r[++j] ='<tr><td><input type="hidden" name="somename1" value="'+data[key].id+'"/><input type="hidden" name="somename2" value="'+data[key].is_deleted+'"/>'+data[key].lic_category_name+'</td>';
                r[++j] = '<td>'+data[key].someval1+'</td>';
                r[++j] = '<td>'+ data[key].someval2+'</td>';
                r[++j] = '<td>'+ data[key].someval13+ '</td>';
                r[++j] ='<td class="last"><a href="view?id='+data[key].id+' title="View"><i class="fa fa-eye"></i></a> <a href="edit?id='+data[key].id+'title="Edit"><i class="fa fa-edit"></i></a> <a href="delete?id='+data[key].id+'onclick="return confirm("Are you sure you want to delete?")" title="Delete"><i class="fa fa-trash"></i></a></td></tr>'; 
                rowNode = table.row.add(r);

        }

        rowNode.draw().node()

   }
}

My JSON Response,

[{"id":70,"somekey1":"GC 1","somekey2":"GC 1","somekey3":8,"somekey4":5000,"somekey5":1,"somekey5":1,"is_deleted":0}]

It Worked for me

Nishant · Accepted Answer · 2019-06-04 06:43:12Z

For loading dynamic data table on ajax response please go through below code

$.ajax({
     type: "GET",
     url: "Controller/Action",
     async: true,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (data) {
         if (data !== null && data.length > 0) {
             var tableData = JSON.parse(data);

             $("#table0").DataTable().destroy();


             $("#table0").DataTable({
                 dom: "Bfrtip",
                 data: tableData, // this is to be based on your json structure 

                 columns: [

                     {
                         className: 'select-checkbox',

                         orderable: false,

                         data: null,

                         defaultContent: ''

                     },

                     { data: "name" },
                     { data: "position" },
                     { data: "office" },
                     { data: "extn." },
                     { data: "start_date" },
                     { data: "salary" }

                 ],
                 rowReorder: {
                     dataSrc: 'DT_Rowid'
                 },
                 select: {
                     style: 'os',
                     selector: 'td:first-child'
                 }
                 , buttons: [
                     { extend: "create", editor: editor },
                     { extend: "edit", editor: editor },
                     { extend: "remove", editor: editor }
                 ]

             });


         }
     },
     error: function Error(result, error) {
         alert("error " + result.status + " " + result.statusText);
     }
 });}

Detailed Explaination Data table

Collectives™ on Stack Overflow

Bootstrap datatable not working after loading data using ajax json

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related