【问题标题】:DataTables: Disable header click sorting, still allow manual sortingDataTables:禁用标题点击排序,仍然允许手动排序
【发布时间】:2013-11-18 23:46:48
【问题描述】:

我正在使用DataTables 并希望使用下拉菜单而不是单击表头来进行排序。我有下拉菜单排序功能,但我不知道如何在不禁用下拉菜单排序的情况下禁用表头排序。如何禁用 just 表头排序?

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>

【问题讨论】:

  • 如果在 API 中找不到方法...可以设置表格包装器位置:相对,并附加一个位于标题上方的绝对位置 div

标签: jquery datatables


【解决方案1】:

您可以取消绑定点击处理程序:

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

http://jsfiddle.net/bHKNQ/1

【讨论】:

  • 谢谢。你的回答给了我一个关于我试图解决的相关问题的提示。不同之处在于我需要打开和关闭点击。我试过 table_obj.find("th").on("click.DT");但它没有用。知道为什么吗?请在这里查看我的问题stackoverflow.com/questions/27407171/…
猜你喜欢
  • 1970-01-01
  • 2012-08-13
  • 1970-01-01
  • 2017-06-13
  • 1970-01-01
  • 2014-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多