Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm using DataTables and would like to have sorting done with dropdown menus rather than with clicking on the table headers. I have the dropdown menu sorting functionality in place, but I can't figure out how to disable the table header sorting without also disabling the dropdown menu sorting. How can I disable just the table header sorting?

jsfiddle

JavaScript

function update_sort() {
    var sort1 = $('#sort1').val();
    var sort2 = $('#sort2').val();
    var sort3 = $('#sort3').val();

    var sorting = [[sort1, 'asc']];

    if (sort2) {
        sorting.push([sort2, 'asc']);
    }

    if (sort3) {
        sorting.push([sort3, 'asc']);
    }

    var table_obj = $('table').dataTable();

    table_obj.fnDestroy();

    table_obj.dataTable({
        'bPaginate': false,
        'bFilter': false,
        'bInfo': false,
        'aaSortingFixed': sorting
    });
}

update_sort();

$('p select').change(function() {
    update_sort();
});

HTML

<p>
    Sort By:

    <select id="sort1">
        <option value="0">Column 1</option>
        <option value="1">Column 2</option>
        <option value="2">Column 3</option>
    </select>

    Then By:

    <select id="sort2">
        <option value="">---------</option>
        <option value="0">Column 1</option>
        <option value="1">Column 2</option>
        <option value="2">Column 3</option>
    </select>

    Then By:

    <select id="sort3">
        <option value="">---------</option>
        <option value="0">Column 1</option>
        <option value="1">Column 2</option>
        <option value="2">Column 3</option>
    </select>
</p>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>A</td>
            <td>C</td>
        </tr>
        <tr>
            <td>A</td>
            <td>C</td>
            <td>B</td>
        </tr>
        <tr>
            <td>B</td>
            <td>B</td>
            <td>A</td>
        </tr>
        <tr>
            <td>B</td>
            <td>A</td>
            <td>C</td>
        </tr>
        <tr>
            <td>C</td>
            <td>B</td>
            <td>A</td>
        </tr>
    </tbody>
</table>
share|improve this question
    
if can't find a way in the API...can set table wrapper position:relative, and append an absolute position div that sits over the header – charlietfl Nov 19 '13 at 0:07
up vote 7 down vote accepted

You can unbind the click handler:

table_obj.find("th").off("click.DT");

http://jsfiddle.net/bHKNQ/1

share|improve this answer
    
Thanks. Your answer gave me a tip regarding a related problem that i am trying to solve. The difference is i need to switch clicking on and off. I tried table_obj.find("th").on("click.DT"); but it did't work. Any idea why is that ?? Please see my question here stackoverflow.com/questions/27407171/… – ATHER Dec 16 '14 at 22:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.