使用ajax json加载数据后引导数据表不起作用 [英] Bootstrap datatable not working after loading data using ajax json
问题描述
我正在将数据动态加载到 html 表中,如下所示使用的技术栈是:Spring MVC Hibernate Ajax JQuery但是数据表功能没有响应
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
推荐答案
You need to have proper table structure with 假设您的代码的其他部分正常工作,请改用以下代码: Assuming that other parts of your code work correctly, use the code below instead: 这篇关于使用ajax json加载数据后引导数据表不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!<thead></thead>
和 .
th
元素的数量也应该与 td
元素的数量相匹配.
<thead></thead>
and <tbody></tbody>
. Also number of th
elements should match number of td
elements.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');
}
});
}
登录
关闭