1

stateSave: true我正在使用带有选项和自定义多列搜索输入的 jQuery DataTables 插件（版本 1.10.5） ：

$(function(){
    $.fn.extend({
        myDataTable: function(options){
            var $tr = $('<tr></tr>');

            $('thead th', this).each(function(){
                var $td = $('<td></td>')

                var $input = $('<input type="text" placeholder="Search ' + $.trim($(this).text()) + '" />');

                $td.append($input);

                $tr.append($td);
            });

            $('thead', this).prepend($tr);

            $(this).dataTable(options);

            var table = $(this).DataTable();

            table.columns().eq(0).each(function(colIdx){
                $('input', table.table().header()).eq(colIdx).on('keyup textInput change blur click', function(){
                    table.column(colIdx).search($(this).val()).draw();
                });
            });
        }
    });
});

离开页面并返回时，过滤器已正确应用，但输入到搜索输入中的值消失了。退货和使用时如何预先填充它们stateSave: true？

我曾尝试使用fnStateLoaded回调，但我找不到每列的过滤器值的存储位置。

4

2 回答 2

2

实际上，我遇到了您的问题，正在寻找答案。多一点搜索，我找到了正确的解决方案。查看https://odoepner.wordpress.com/2011/12/12/jquery-datatables-column-filters-state-saving/以获取解决方案。

于 2015-02-18T17:55:26.483 回答
1

这是我实施的一种快速而简单的解决方法。

第 1 步：为每个 tfoot 输入分配唯一 ID，以便您可以在 saveState 为 true 时轻松识别哪些输入具有过滤器值。

var counter = 0;
$('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" id="footer_filter['+counter+']" placeholder="Search '+title+'" value="" />' );
    counter++;
} );

第 2 步：将此函数添加到您的数据表中：

"stateLoaded": function (settings, data) {
    for (var i = 0; i < data.columns.length; i++) {
        var filter = data.columns[i].search['search'];
        if (filter) {
            var element = document.getElementById("footer_filter["+i+"]");
            element.value = filter;
        }
    }
}

这是相同的 jsfiddle： JSFiddle

干杯!

于 2017-08-14T21:30:00.527 回答