jquery datatables sort by column with select box

Question

I have used datatables plugin in one of my project to display a datagrid with several columns. now, i have included a Select box on top of the table which contains all the column names as values wherein i want to search based on the value selected from the select box. How can i achieve this.

//My HTML Code

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

//script

$(document).ready(function(){


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


            });
});

davidkonrad · Accepted Answer · 2014-04-03 10:30:43Z

1

You simply use fnSort on your table. Here I expect the <select> has the id select and you have assigned the dataTable to an object by

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

Use

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

see demo -> http://jsfiddle.net/A769B/

answered Apr 3, 2014 at 10:30

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SivaRajini Over a year ago

david : am facing some issue in datatable if you have any idea please look on to this stackoverflow.com/questions/22841231/…

davidkonrad Over a year ago

I'll take a look when I come home!

Collectives™ on Stack Overflow

jquery datatables sort by column with select box

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related