我无法将数据添加到bootStrap数据表中

时间:2019-08-31 12:39:59

标签: javascript jquery html twitter-bootstrap datatables

我需要引导数据表上的其他数据,并且尝试了很多时间。

数据类型为JSON对象,来自servlet页面 JSONArray[JSONObject{}]

服务器端处理错误(客户端)

我已经像这样尝试过Ajax:

            $('#mytable').DataTable({
                ajax:{
                    url:'memSearchTable.ad',
                    dataSrc:''
                    },
                    columns:[...]
            });

但是,它不起作用。

这是我的脚本:

var data2;
$(document).ready(function(){

        $.ajax({
            url:'memSearchTable.ad',
            success:function(data){
                console.log("data : "+data);
                data2 = data;
            }
        });

        $('#myTable').DataTable({
            data:'data2',
            columns: [
                {data:'memNum'},
                {data:'memId'},
                {data:'memName'},
                {data:'memGender'},
                {data:'memPhone'},
                {data:'nationCode'},
                {data:'memPoint'},
                {data:'memType'},
                {data:'memStatus'},
                {data:'enrollDate'},
                {data:'noShow'}
            ]
        });

这是数据样本

[
{"memNum":"1",
"memStatus":"Y",
"memName":"ADMIN",
"noShow":"0",
"memPhone":"01012340001",
"memType":"A",
"memGender":"M",
"memPoint":"0",
"enrollDate":"2019-08-29",
"memId":"1","nationCode":"1"},
{"memNum":"2",
"memStatus":"Y",
"memName":"OWNER",
"noShow":"0",
"memPhone":"01012340002",
"memType":"O",
"memGender":"M",
"memPoint":"0",
"enrollDate":"2019-08-29",
"memId":"2",
"nationCode":"2"}
]

我仍然从表中得到“表中没有可用数据”

1 个答案:

答案 0 :(得分:0)

根据the documentation,我认为您应该执行以下操作:

$(document).ready(function(){
    $.ajax({
        url: 'memSearchTable.ad',
        success: function(data) {
            $('#myTable').DataTable().rows.add(data).draw();
        }
    });

    $('#myTable').DataTable({
        data:'data2',
        columns: [
            {data:'memNum'},
            {data:'memId'},
            {data:'memName'},
            {data:'memGender'},
            {data:'memPhone'},
            {data:'nationCode'},
            {data:'memPoint'},
            {data:'memType'},
            {data:'memStatus'},
            {data:'enrollDate'},
            {data:'noShow'}
        ]
    });
});