DataTables: Disable header click sorting, still allow manual sorting

Question

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>

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
– charlietfl, Commented Nov 19, 2013 at 0:07

gilly3 · Accepted Answer · 2013-11-19 00:22:58Z

7

You can unbind the click handler:

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

http://jsfiddle.net/bHKNQ/1

answered Nov 19, 2013 at 0:22

gilly3

92.7k26 gold badges148 silver badges179 bronze badges

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

1 Comment

ATHER Over a year ago

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

Collectives™ on Stack Overflow

DataTables: Disable header click sorting, still allow manual sorting

JavaScript

HTML

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JavaScript

HTML

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related