Question

我正在使用带有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回调，但找不到每列的过滤值存储位置。

Answer 1

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

Answer 2

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

第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

干杯！

使用stateSave：true返回时，如何使用其值预填充多个搜索列？

2 个答案: