jquery数据表使用选择框按列排序

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

//我的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>

---

您只需在表上使用

fnSort

。在这里，我希望

具有select id，并且您已经通过

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

使用

---

见演示->

大卫：我在数据表中遇到了一些问题，如果你有任何想法，请看这个，我回家后再看！谢谢你的热情回应。

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

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