Jquery数据表：基于表外的选择框过滤/搜索

Question

我在表格上使用dataTables jQuery 插件，但我想在搜索框之前添加一个过滤列下拉框。我看到了将下拉框添加到各个列的文档，但我只想添加一个包含所有列名称的下拉框。我是新手，非常感谢任何帮助。我在下面添加了我的代码。

HTML：

<select id='mySelector'>
   <option value="">Please Select</option>
   <option value='Name'>Name</option>
   <option value='Highlights'>Highlights</option>
   <option value='Area'>Area</option>
</select>
<table class="table table-striped" id="myTable" cellspacing="0">
    @{int rowNo = 0;}
    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Highlights)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Area)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in Model.Select((x, i) => new { Data = x, Index = i + 1 }))
        {
            rowNo++;
            <tr>
                <td>
                    @rowNo.ToString("000")
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Data.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Data.Highlights)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Data.Area)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Data.id}) |
                    @Html.ActionLink("Details", "Details", new { id = item.Data.id}) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Data.id})
                </td>
            </tr>

        }
    </tbody>
</table>

JS：

  $('#myTable').DataTable();

Answer 1

试试这个，我添加下拉选项来选择要搜索的列。

var table = $('#example').DataTable({
    dom : 'l<"#add">frtip'
})  

$('<label/>').text('Search Column:').appendTo('#add')
$select = $('<select/>').appendTo('#add')

$('<option/>').val('All').text('All').appendTo($select);
$('<option/>').val('0').text('Seq').appendTo($select);
$('<option/>').val('1').text('Name').appendTo($select);
$('<option/>').val('2').text('Position').appendTo($select);
$('<option/>').val('3').text('Office').appendTo($select);
$('<option/>').val('4').text('Start Date').appendTo($select);
$('<option/>').val('5').text('Salary').appendTo($select);

$('input[type="search"]').on( 'keyup change', function () {
    var searchValue = $(this).val();
    var columnSearch = $select.val();

    if(columnSearch == 'All'){
        table.search(searchValue).draw();
    } else {
        table.columns(columnSearch).search(searchValue).draw();
    }
});

这是上面代码的demo.。