在jQuery中,我可以在Ajax函数之后使用DataTables插件吗?

时间:2018-04-05 13:49:31

标签: jquery ajax datatable

如果我尝试重新加载我的dataTable,则不会进行任何更改。

$.ajax({
    url: '../CustomJS/Service.asmx/GetCustomer',
    method: 'POST',
    dataType: 'json',
    success: function (data) {
    $('#dataTable').dataTable({
            data: data,
            sorting: true,
            searching : true,
            columns: [
                {
                    'data': 'CustomerID',
                    'sortable': false,
                    'searchable':false,
                    "render": function (id) {
                        return '<input type="checkbox" name="custSelect" data-columnIndex="'+id+'"/>'
                    }
                },
                {'data':'CustomerID'},
                {'data':'CustomerName'},
                {'data':'CustomerMobile'},
                {'data':'City'},
                {'data': 'Email' },
                {
                    'sortable': false,
                    'searchable': false,
                    'data': function (data, type, dataToSet) {
                        console.log("data",data)
                        if (data.Status == 1) {
                            return '<i class="far fa-edit update-icon" onclick=Update(' + data.CustomerID + ')></i><i class="fas fa-lock-open unlock-icon" onclick=Status('+data.CustomerID+',' + data.Status + ')></i><i class="fas fa-trash delete-icon" onclick=Delete(' + data.CustomerID + ')></i>';
                        } else {
                            return '<i class="far fa-edit update-icon" onclick=Update(' + data.CustomerID + ')></i><i class="fas fa-lock lock-icon" onclick=Status(' + data.Status + ',' + data.CustomerName + ')></i><i class="fas fa-trash delete-icon" onclick=Update(' + data.CustomerID + ')></i>';
                        }
                    },
                },
                {
                    'data': 'Status',
                    'sortable': false,
                    'searchable': false,
                    "render": function (active) {
                        if (active == 1) {
                            return '<label class="status-active">Active</label>';
                        } else {
                            return '<label class="status-in-active">In-Active</label>';
                        }
                    }
                }
            ]
        });

    },
    error: function (JqXHR, error, exception) {
        console.log("XHR", JqXHR.responseText);
        console.log("error", error);
        console.log("Exception", exception);
    }
});

这里我习惯了重装表,

table.dataTable()ajax.reload();

table.datatable()ajax.api()加载();

$(&#39;#的dataTable&#39)。dataTable中()API()加载();

$(&#39;#的dataTable&#39)。数据表()API()加载();

这些对我不起作用。

1 个答案:

答案 0 :(得分:1)

问题是你已经在Ajax成功回调函数中定义了DataTables - 所以这意味着DataTables不知道Ajax配置,它刚刚用返回的数据初始化。

使用DataTables&#39; ajax.reload()函数,您需要在DataTables初始化中定义Ajax配置 - 看一下示例here