我无法重新加载jQuery DataTable ajax

时间:2016-11-21 09:29:47

标签: jquery datatables

我有jQuery DataTable

function loadTable() {
        var table = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "bLengthChange": false,
            "ajax": {
                "url": "/updateWithParams",
                "type": "POST",
                "data": function (d) {
                    return $('#formFilter').serializeArray();
                }
            },
............
}

并将其命名为

$(document).ready(function () {
        loadTable();
    });

但是加载后我可以在按钮上调用此方法(更改表单gata和重载表)但是我收到错误 - 无法重新初始化dataTable ..... 我该如何重新加载数据表?

编辑:

$(document).ready(function () {
//        connect();
        setDatesFilters();
        loadTable();
    });

    function setDatesFilters() {
        var day = start.getDate();
        var month = start.getMonth() + 1;
        var year = start.getFullYear();
        var str = day + '.' + month + '.' + year;
        $('#startDateFilter').val(str.concat(" 00:00"));
        $('#endDateFilter').val(str.concat(" 23:59"));
    }
    var table;
    function reload() {
        table.ajax.reload();
    }
    function loadTable() {
        table = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "bLengthChange": false,
            "ajax": {
                "url": "/updateWithParams",
                "type": "POST",
                "data": function (d) {
                    return $('#formFilter').serializeArray();
                }
            },
            "columns": [
                {"data": "id"},
                {"data": "name"},
                {
                    "targets": -1,
                    "data": "status",
                    "render": function (data, type, full) {
                        if (data == 0) return "<p> Новая </p>";
                        if (data == 1 || data == 2) return "<p> Выполняется </p>";
                        if (data == 3) return "<p> Выполнено </p>";
                        if (data == 4) return "<p> Отменено </p>";
                    }
                },
                {
                    "data": "dateCreated",
                    "render": function (data) {
                        var dateStart = new Date(data);
                        var day = dateStart.getDate();
                        var month = dateStart.getMonth() + 1;
                        var year = dateStart.getFullYear();
                        return day + '.' + month + '.' + year;
                    }
                },
                {"data": "userName"},
                {
                    "targets": -1,
                    "data": null,
                    "render": function (data, type, full) {
                        if (data.status == '0') {
                            return "<button type='button' class='btn btn-info'>Запустить</button>";
                        }
                        if (data.status == '1' || data.status == '2') {
                            return "<button type='button' class='btn btn-primary'>Остановить</button>";
                        }
                        if (data.status == '3') {
                            return "<button type='button' class='btn btn-info'>Скачать</button>";
                        }
                        if (data.status == '4') {
                            return "<button type='button' class='btn btn-warning'>Отменено</button>";
                        }
                    }
                }
            ]
        });
        $('#example tbody').on('click', 'td', function () {
            var id = table.cell(this).data().id;
            var status = table.cell(this).data().status;
            console.log("id: " + id + " status: " + status);
            if (status == '0') startResolution(id);
            if (status == '1' || status == '2') stopResolution(id);
            if (status == '3') downloadResolution(id);
        });
    }

2 个答案:

答案 0 :(得分:0)

如果服务器端的数据已更新,并且您想在前端手动更新:

ajax.reload()

  

在可以更新表格中显示的数据的环境中   在服务器端,能够重新加载表通常很有用,   显示最新数据。这种方法提供了这种能力,   向已定义的URL发出Ajax请求(如果使用ajax.url()   你需要改变URL。)

fnReloadAjax插件的工作方式也相同,但从DataTables 1.10及以上版本开始不推荐使用。

即:

var table = null;

function loadTable() {
    table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "bLengthChange": false,
        "ajax": {
            "url": "/updateWithParams",
            "type": "POST",
            "data": function (d) {
                return $('#formFilter').serializeArray();
            }
        },
............
}

function reloadTable(){
    table.ajax.reload(); 
    // or 
    // table.ajax.reload( null, false ); // user paging is not reset on reload
}

答案 1 :(得分:0)

您可以在应用搜索过滤器后刷新数据表:

$('#example').DataTable().draw();

即使没有更改搜索过滤器,也会调用我认为会重新加载当前页面的方法。