Question

我正在使用dataTable jquery插件。我的数据来自ajax。代码如下所示我想在ajax调用后创建表。在我的html文件中

$(document).ready(function(){
    $(".report-table").DataTable({
                        "pagingType": "full_numbers"
                    });
});

在我的javascript中

$("#student_report_form_btn").on('click',function(){
            $("#student_report_detail_list").empty();
            if($("#student_report_form").valid())
            {
                $.ajax({
                    url:site + 'index.php/user_report',
                    type:"post",
                    dataType:"json",
                    data:sume data,
                    success:function(msg){
                        if(msg.user_report_detail !='')
                        {
                            //dddd(msg);return false;
                            student_report_table = '';
                            student_report_table += '<div class="table-responsive">';
                            student_report_table += '<table class="table table-bordered report-table" id="report-table">';
                                    student_report_table +='<tr><th>Date</th><th>Intime</th><th>Outtime</th></tr>';
                                    $.each(msg.user_report_detail,function(k,v){
                                        student_report_table += '<tr><td>'+ v['date'] +'</td><td>'+ v['intime'] +'</td><td>'+ v['outtime'] +'</td></tr>';
                                    });
                            student_report_table += '</table>';
                            student_report_table += '</div>';
                            $("#student_report_detail_list").append(student_report_table);
                        }else{
                            $("#student_report_detail_list").append("<div class='alert alert-danger'>" +
                                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'> <span aria-hidden='true'>&times;</span></button>" +
                                "<strong>Sorry!</strong> There are not records for this user." +
                                "</div>");
                            setTimeout(function() { $('.alert').alert('close'); }, 2000);
                        }
                    }
                });
            }
        });

此处的dataTable不起作用。请帮忙。

Answer 1

如果您创建表的方法有效（创建数据表有更好的可能性）我认为唯一的问题是您要初始化表

尝试以下

$("#student_report_form_btn").on('click',function()
{
    $("#student_report_detail_list").empty();
    if($("#student_report_form").valid())
    {
        $.ajax({
            url:site + 'index.php/user_report',
            type:"post",
            dataType:"json",
            data:sume data,
            success:function(msg){
                if(msg.user_report_detail !='')
                {
                    //dddd(msg);return false;
                    student_report_table = '';
                    student_report_table += '<div class="table-responsive">';
                    student_report_table += '<table class="table table-bordered report-table" id="report-table">';
                            student_report_table +='<tr><th>Date</th><th>Intime</th><th>Outtime</th></tr>';
                            $.each(msg.user_report_detail,function(k,v){
                                student_report_table += '<tr><td>'+ v['date'] +'</td><td>'+ v['intime'] +'</td><td>'+ v['outtime'] +'</td></tr>';
                            });
                    student_report_table += '</table>';
                    student_report_table += '</div>';
                    $("#student_report_detail_list").append(student_report_table);
                    $("#student_report_detail_list .report-table").DataTable({
                        "pagingType": "full_numbers"
                    });
                }else{
                    $("#student_report_detail_list").append("<div class='alert alert-danger'>" +
                        "<button type='button' class='close' data-dismiss='alert' aria-label='Close'> <span aria-hidden='true'>&times;</span></button>" +
                        "<strong>Sorry!</strong> There are not records for this user." +
                        "</div>");
                    setTimeout(function() { $('.alert').alert('close'); }, 2000);
                }
            }
        });
    }
});

如何在dataTable中调用ajax之后追加数据

1 个答案: