当使用 stateSave: true 返回时，如何用它们的值预填充多个搜索列？

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

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

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

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 返回时，如何用它们的值预填充多个搜索列？

How can prefill multiple search columns with their values when returning with stateSave: true?

jquery

jquery-plugins

datatables

jquery-datatables

datatables-1.10