如何使用 jQuery DataTables 订单监听器答案

【问题标题】：How to use the jQuery DataTables order listener如何使用 jQuery DataTables 订单监听器
【发布时间】：2014-10-28 15:01:34
【问题描述】：

我正在使用 DataTable jQuery 插件 (http://datatables.net/)，我想在单击 TH 元素时禁用每列的默认排序，而是指定另一个排序元素（这将是每个 TH 的子元素)。

我在 JS 中有这个

var table = $('.table-striped').DataTable({
    "ordering": false
    });
table.order.listener( $('#sort'), 1);

这是在 HTML 中

<table class="table table-striped" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th><span id="sort">Col 1</span></th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td><span>2</span></td>
            <td><span>CHARLIE</span></td>
            <td><span>DELTA</span></td>
        </tr>
        <tr>
            <td><span>1</span></td>
            <td><span>ALPHA</span></td>
            <td><span>BETA</span></td>
        </tr>
        </tbody>

Fiddle

所以我相信，当点击 ID 为“排序”的 SPAN 时，表格应该按第 1 列排序 - 但是它没有:(有什么想法吗？？

顺便说一句，jQuery 和 DataTables 都已正确初始化，我可以获得其他 DataTable 功能，如分页工作 :)

【问题讨论】：

这很难。它应该工作。我会在 DataTables 论坛上发帖。艾伦非常乐于助人。

标签： javascript jquery html twitter-bootstrap datatables

【解决方案1】：

所以，我的解决方案是在 DataTables 上启用默认顺序，然后通过返回 false 来防止排序事件对 TH 中的元素 [我不希望排序事件起作用] 产生影响：

var table = $('.table-striped').DataTable({
"ordering": true
});

$('.table-striped th div').click(function() {
return false;
})

<table class="table table-striped" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th><span id="sort">Sort me</span><div>No sort</div></th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td><span>2</span></td>
        <td><span>CHARLIE</span></td>
        <td><span>DELTA</span></td>
    </tr>
    <tr>
        <td><span>1</span></td>
        <td><span>ALPHA</span></td>
        <td><span>BETA</span></td>
    </tr>
    </tbody>

希望有帮助！

【讨论】：