Datatables 1.10仅通过点击排序图标进行排序

Question

我正在使用版本为1.10的datatables。 我的要求是：

1. 单击排序图标（向上和向下箭头）时，应在服务器端工作。
2. 当单击th时，应在本地工作。这是因为用户错误地点击了thead，导致服务器负担过重。

目标：我希望同时保留以下两点：

1. 本地排序[仅针对当前表格显示/页的数据]（单击thead而非图标）
2. 服务器端排序[仅通过单击图标]。

问题所在： DataTables 使用 CSS 背景图像进行排序。这使得很难检测到图标上的点击，因为根据我的了解，CSS 背景图像不能在单击时被捕获。

以下是我设想的解决方案，但还未取得进展：

JSFIDDLE: http://jsfiddle.net/bababalcksheep/mae29pau/10/

JS:

$(document).ready(function () {
    //http://www.datatables.net/reference/api/
    var url = "http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2";
    //
    $('th').on("click.DT", function (event) {       
        event.stopImmediatePropagation();
    });

    var table = $('#example').DataTable({
        "processing": true,
            "serverSide": false,
            "ajax": url
    });
    //
    //$('th').off('click.DT');
    // sort internally
    table.column('2').order('asc');
});

更新1:

JSFIDDLE: http://jsfiddle.net/bababalcksheep/mae29pau/14/

我通过添加sortMask并将其绑定到单击事件来更进一步。sortMask是一个div，它被添加到每个列的<thead> -> <tr> -> <th>中。

CSS:

.sortMask {
    width:19px;
    height:19px;
    float:right;
    display:inline-block;
    z-index:0;
    margin-right: -19px;
    /*background:red;*/
}

JS:

    $('th').on("click.DT", function (e) {
        //stop Propagation if clciked outsidemask
        //becasue we want to sort locally here
        if (!$(e.target).hasClass('sortMask')) {
            e.stopImmediatePropagation();
        }
    });

- django

---

顺便说一句，尽量让客户端处理这些事情，因为如果有多个用户点击排序，服务器将会有不必要的负载。 - Alberto Bonsanto

你能否在<th>中插入图标，例如**<th> <i class="sendToServer fa fa-lock pull-right"></i> </th>，然后在单击图标时将其发送到服务器，然后$('.sendToServer').on('click',function(e){ // 服务器端编码; e.stopPropogation(); })**，并且在thead的任何位置，除了图标，如果用户单击它，它将正常排序。 - Alok

点击表头进行排序是正常预期的用户行为和最常见的用户界面。他们不会无意中这样做是没有道理的。 - charlietfl

考虑到我需要两种选择，一种是通过点击图标进行服务器端排序，另一种是本地排序（通过点击表头而非图标实现）。本地排序仅适用于当前显示的记录。这是我的目标，要将它们分开保持独立。 - django

Answer 1

我认为更好的解决方案是将文本包装起来，而不是图标：

<th><div>First name <div>abc</div></div></th>

并且：

$('th').on("click", function (event) {
    if($(event.target).is("div"))
        event.stopImmediatePropagation();
});

请注意：您应该使用普通的 click 事件代替 click.DT，因为在这种情况下它将在 DataTables 事件之前被触发。

http://jsfiddle.net/mae29pau/38/

- Daniil Ryzhkov