使用ajax json加载数据后引导数据表不起作用 [英] Bootstrap datatable not working after loading data using ajax json

查看:23
本文介绍了使用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

推荐答案

<thead></thead>.th 元素的数量也应该与 td 元素的数量相匹配.

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

        }
    });
}

这篇关于使用ajax json加载数据后引导数据表不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆