javascript - DataTables 单个列搜索

Question

是否可以合并Select Inputs 和Text Inputs？我在几个表上使用 DataTables，总是相同的初始化。我想通过列标题为 Select Inputs 选择列，因为我想要选择列表的列并不总是在相同的位置。然后所有其他我想要的 Text Inputs。这样一来，我将拥有一个包含 Select Inputs 的列，所有其他列都包含 Text Inputs。

我已经能够实现不同的 Select和 Text来自这两个示例的输入。但我对 jquery 和 javascript 的了解还不够好，无法弄清楚如何为 Select Input 选择正确的列，并让所有其他列成为 Text Inputs。我使用的表格可以是 3 列到 75 列以上的任何地方。我想通过选择输入的标题名称选择列。

最重要的是，有没有办法让 Select Input 成为 MultiSelect Input？我有一个状态选择器，并且希望能够一次选择多个状态。

这是我用于Select 和Text 输入的两种不同方式:

initComplete: function ()
{
    this.api().columns([1]).every(function ()
    {
        var column = this;
        var select = $('<select><option value=""></option></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function ()
                {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    var strVal = val.replace("<div class='Scrollable'>", '');
                    strVal = strVal.replace("<\/div>", '');
                    column
                        .search(strVal ? /*'^' +*/ strVal /*+ '$'*/ : '', true, false)
                        .draw();
                });

        column.data().unique().sort().each(function (d, j)
        {
            var strValue = d.replace("<div class='Scrollable'>", '');
            strValue = strValue.replace("<\/div>", '');
            select.append('<option value="' + strValue + '">' + strValue + '</option>')
        });
    });
}
,
initComplete: function ()
{
    var api = this.api();

    // Apply the search
    api.columns().every(function ()
    {
        var that = this;

        $('input', this.footer()).on('keyup change', function ()
        {
            if (that.search() !== this.value)
            {
                that
                      .search(this.value)
                      .draw();
            }
        });
    });
}

EIDT

使用下面@Gyrocode 的建议，我现在有了这个:

initComplete: function ()
{
    var api = this.api();

    // Apply the search
    api.columns('.dt-filter-text').every(function ()
    {
        var that = this;

        $('input', this.footer()).on('keyup change', function ()
        {
            if (that.search() !== this.value)
            {
                that
                  .search(this.value)
                  .draw();
            }
        });
    });
    api.columns('.dt-filter-select').every(function ()
    {
        var column = this;
        var select = $('<select><option value=""></option></select>')
            .appendTo($(column.footer()).empty())
            .on('change', function ()
            {
                var val = $.fn.dataTable.util.excapeRegex(
                    $(this).val()
                );
                var strVal = val.replace("<div class='Scrollable'>", "");
                strVal = strVal.replace("</div>", '');
                column
                    .search(strVal ? /*'^' +*/strVal /*+ '$'*/ : '', true, false)
                    .draw();
            });
        column.data().unique().sort().each(function (d, J)
        {
            var strValue = d.replace("<div class='Scrollable'>", '');
            strValue = strValue.replace("</div>", '');
            select.append('<option value="' + strValue + '">' + strValue + '</option>')
        });
    });
}

这几乎行得通。当我从状态列中的选择器中选择一个值时，它不会搜索。我确定我错过了一些明显的东西，但我不知道是什么。

此外，它并没有获取所有状态，仅获取第一页上的状态。有没有办法获取所有状态，或者可能有一个数组来保存我需要的所有值，因为状态不太可能改变？

Answer 1

我已经开始工作了。只需确保将类添加到标题中，如下所示:

<thead>
    <tr>
        <th class="dt-filter-text">Name</th>
        <th class="dt-filter-select">Position</th>
        <th class="dt-filter-select">Office</th>
        <th class="dt-filter-text">Age</th>
        <th class="dt-filter-text">Start date</th>
        <th class="dt-filter-text">Salary</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</tfoot>

JavaScript:

$(document).ready(function() {
    // DataTable
    $('#table').DataTable({
        initComplete: function () {

            //Apply select search
            this.api().columns('.dt-filter-select').every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d,j) {
                    select.append('<option value="'+d+'">'+d+'</option>')
                });
            });

            //Apply text search
            this.api().columns('.dt-filter-text').every(function () {
                var title = $(this.footer()).text();
                $(this.footer()).html('<input type="text" placeholder="Search '+title+'" />');
                var that = this;
                $('input',this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
        }
    });
});

如果您想将页脚直接放在页眉下方，请将此添加到 CSS:

#table tfoot {
    display: table-header-group;
}