如何使DataTable记住删除行后的搜索和分页状态

时间:2017-11-29 23:23:36

标签: javascript jquery datatables

我希望数据表在删除行时记住搜索过滤器和分页。我写了一个函数,在服务器端删除数据后重新初始化数据表,但是"状态"离开了。

从服务器返回包含该表的部分视图。

我猜有些东西可以记住这个州,但我找不到它。

以下是代码:

if ($('#tblAllFiles')) {
            var oTableAllFiles = $('#tblAllFiles').dataTable({
                "paging": true,
                "ordering": false,
                "info": false,
                "bDestroy": true,  
                "columns": [
                    // Company File Number column
                    { "searchable": true },
                    { "searchable": false },
                    // Client Name column
                    { "searchable": true },
                    // File Number column
                    { "searchable": true },
                    // Company column
                    { "searchable": true },
                    { "searchable": false },
                    // File Status column
                    { "searchable": true },
                    { "searchable": false }
                ],
                "language": {
                    "emptyTable": "There are no files."
                },
                //"initComplete": dataTableInitCompleteFunction()
                "initComplete": function () {
                    console.log("initComplete");
                    var columnCompany = this.api().columns([4]);
                    var selectCompany = $("#selectCompany");
                    selectCompany.empty();
                    selectCompany.append('<option value="Company">Company</option>');
                    columnCompany.every(function () {
                        this.data().unique().sort().each(function (d, j) {
                            selectCompany.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                    selectCompany.on("change", function () {
                        var selectedCompany = $(this).val();
                        columnCompany
                            .search(selectedCompany ? '^' + selectedCompany + '$' : '', true, false)
                            .draw();
                    });

                    var columnFileStatus = this.api().columns([6]);
                    var selectFileStatus = $("#selectFileStatus");
                    selectFileStatus.empty();
                    selectFileStatus.append('<option value="File Status">File Status</option>');
                    columnFileStatus.every(function () {
                        this.data().unique().sort().each(function (d, j) {
                            selectFileStatus.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                    selectFileStatus.on("change", function () {
                        var selectedFileStatus = $(this).val();
                        console.log(selectedFileStatus);
                        columnFileStatus
                            .search(selectedFileStatus ? '^' + selectedFileStatus + '$' : '', true, false)
                            .draw();
                    });
                 }
            });
            //$("#tblAllFiles_filter").css("display", "none");
        }
    });

    function fileDeleteCallback(result) {
        console.log(result);
        if (result.isFileDeleted) {
            alert("An error occured. The file was NOT deleted.");
        }
        else {
            $("#divFilesSearchResult").html(result);              
            dataTableInitCompleteFunction();
        }              
    }       

    function dataTableInitCompleteFunction() {
        console.log("initComplete");
        var dt = $('#tblAllFiles').dataTable({
            "paging": true,
            "ordering": false,
            "info": false,
            "bDestroy": true,
            "columns": [
                // Company File Number column
                { "searchable": true },
                { "searchable": false },
                // Client Name column
                { "searchable": true },
                // File Number column
                { "searchable": true },
                // Company column
                { "searchable": true },
                { "searchable": false },
                // File Status column
                { "searchable": true },
                { "searchable": false }
            ],
            "language": {
                "emptyTable": "There are no files."
            }
        });
        var api = dt.dataTable().api();
        var columnCompany = api.columns([4]);
        var selectCompany = $("#selectCompany");
        selectCompany.empty();
        selectCompany.append('<option value="Company">Company</option>');
        columnCompany.every(function () {
            this.data().unique().sort().each(function (d, j) {
                selectCompany.append('<option value="' + d + '">' + d + '</option>')
            });
        });
        selectCompany.on("change", function () {
            var selectedCompany = $(this).val();
            if ($(this).prop("selectedIndex") > 0) {
                columnCompany
                    .search(selectedCompany ? '^' + selectedCompany + '$' : '', true, false)
                    .draw();
            }
            else {
                columnCompany
                    .search('', true, false)
                    .draw();
            }
        });
        var columnFileStatus = api.columns([6]);
        var selectFileStatus = $("#selectFileStatus");
        selectFileStatus.empty();
        selectFileStatus.append('<option value="File Status">File Status</option>');

        columnFileStatus.every(function () {
            this.data().unique().sort().each(function (d, j) {
                selectFileStatus.append('<option value="' + d + '">' + d + '</option>')
            });
        });
        selectFileStatus.on("change", function () {
            var selectedFileStatus = $(this).val();
            if ($(this).prop("selectedIndex") > 0) {
                columnFileStatus
                    .search(selectedFileStatus ? '^' + selectedFileStatus + '$' : '', true, false)
                    .draw();
            }
            else {
                columnFileStatus
                    .search('', true, false)
                    .draw();
            }
        });
    }

0 个答案:

没有答案