Bootstrap datatable не работает после загрузки данных с использованием ajax json

Я загружаю данные динамически в таблицу html, как показано ниже. Используемый технологический стек: Spring MVC Hibernate Ajax JQuery Но функции данных не отвечают

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

             }
         });
     }

После этого datatable функции не работают


html jquery ajax datatables jsp
person Rohin    schedule 04.01.2016    source источник
comment
После этого datatable функциональные возможности не работают?? Можете ли вы объяснить, что не работает и когда?   -  person An0nC0d3r    schedule 04.01.2016
comment
поиск, пагинация не работают после загрузки данных   -  person Rohin    schedule 04.01.2016
comment
Но вы не разместили код, относящийся к какому-либо поиску или разбивке на страницы? Значит, вы видите ошибки в консоли? Вы должны помочь нам помочь вам!   -  person An0nC0d3r    schedule 04.01.2016
comment
datatable — это плагин в jquery, который предлагает вам автоматизированные функции, такие как нумерация страниц, поиск, фильтрация в вашей html-таблице.   -  person Rohin    schedule 04.01.2016
comment
Так что вы имеете в виду под не работает?   -  person An0nC0d3r    schedule 04.01.2016
comment
Я думаю, что не смог повторно инициализировать datatable после загрузки в него данных.   -  person Rohin    schedule 04.01.2016

Ответы (3)


arrow_upward
3
arrow_downward

У вас должна быть правильная структура таблицы с <thead></thead> и <tbody></tbody>. Также количество элементов th должно соответствовать количеству элементов td.

Предполагая, что другие части вашего кода работают правильно, вместо этого используйте приведенный ниже код:

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

        }
    });
}
person Gyrocode.com    schedule 04.01.2016

arrow_upward
1
arrow_downward 

$.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()

   }
}

Мой ответ JSON,

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

Это сработало для меня

person Siva Anand    schedule 04.08.2016

arrow_upward
0
arrow_downward

Для загрузки таблицы динамических данных в ответ ajax выполните приведенный ниже код.

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

Подробное объяснение Таблица данных

person Nishant    schedule 04.06.2019