jquery datatables 使用选择框按列排序

Question

我在我的一个项目中使用了数据表插件来显示具有多列的数据网格。现在，我在表格顶部包含了一个选择框，其中包含所有列名作为值，我想根据从选择框中选择的值进行搜索。我怎样才能做到这一点。

//我的HTML代码

<div class="table-responsive datagrid">

<table cellpadding="0" cellspacing="0" border="0" class="table" id="example">
<thead class="thead">
    <tr>
        <th>No</th>
        <th>Application Number</th>
        <th>Given Name</th>
        <th>Family Name</th>
        <th>Nationality</th>
                    <th>Passport Number</th>
                    <th>Visa Type</th>
                    <th>Submission Date</th>
    </tr>
</thead>
<tbody>
    <tr class="gradeX">
        <td>1</td>
        <td>APP1212</td>
        <td>Steven</td>
        <td class="center">Gerrard</td>
        <td class="center">British</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeC">
        <td>2</td>
        <td>APP1012</td>
        <td>Fernando</td>
        <td class="center">Torres</td>
        <td class="center">Spanish</td>
        <td>12121212</td>
        <td>Short Work Visa</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>3</td>
        <td>APP1512</td>
        <td>Xabi</td>
        <td class="center">Alonso</td>
        <td class="center">Spanish</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>4</td>
        <td>APP1282</td>
        <td>Zlatan</td>
        <td class="center">Ibrahimovic</td>
        <td class="center">Swedish</td>
        <td>12121212</td>
        <td>Short Work Visa</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>5</td>
        <td>APP1612</td>
        <td>Robin</td>
        <td class="center">Van Persie</td>
        <td class="center">Dutch</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>

            <tr class="gradeX">
        <td>6</td>
        <td>APP1212</td>
        <td>Steven</td>
        <td class="center">Gerrard</td>
        <td class="center">British</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>

</tbody>

</table>


    //Select box with column names as values

    <form class="form-horizontal" role="form">
        <div class="search-by">
        <span>Search By</span>
        <select class="form-control">
        <option value="0">Application Number</option>
        <option value="1">Given Name</option>
        <option value="2">Family Name</option>
        <option value="3">Nationality</option>
        <option value="4">Passport Number</option>
        <option value="5">Visa Type</option>
        <option value="6">Submission Date</option>
        </select>



    </div>

//脚本

$(document).ready(function(){


    //Data Tables functionality
            $('#example').dataTable({
                //Disable Sorting on First Column
                "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 0 ] }
   ],
    "oLanguage": { "sSearch": "" }


            });
});

Answer 1

您只需在桌子上使用fnSort。在这里，我希望 <select> 具有选择 ID，并且您已通过

将 dataTable 分配给对象

var dataTable = $('#example').dataTable({
...

使用

$("#select").change(function() {
    var col = $(this).val();
    dataTable.fnSort([ [ col, 'asc'] ]);
});  

查看演示 -> http://jsfiddle.net/A769B/