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输入的标题名称选择列。

除此之外，有没有办法让Select Input成为MultiSelect输入？我有一个状态选择器，并希望能够一次选择多个状态。

以下是我用于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>')
        });
    });
}

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

此外，它没有获得所有状态，只有第一页上的状态。有没有办法获得所有的状态，或者可能有一个数组，它将包含我需要的所有值，因为状态不太可能改变？

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;
}

Answer 2

您需要为columns() API方法指定列索引以定位特定列。

例如：

initComplete: function ()
{
    // Initialize dropdown filter in second column
    this.api().columns([1]).every(function ()
    {
       // ... skipped ...
    });

    // Initialize text filter in first, third and fourth column
    this.api().columns([0, 2, 3]).every(function ()
    {
       // ... skipped ...
    });
}

但是，我不会处理列索引，而是为每个th元素分配一个类名，您需要一个文本框（dt-filter-text）或下拉列表（dt-filter-select）。然后，您可以为columns() API方法提供选择器，例如columns('.dt-filter-text')或columns('.dt-filter-select')。

DataTables单个列搜索

2 个答案: