Javascript Datatables 1.10仅通过点击th中的排序图标进行排序

我使用的是1.10版。 我有一个要求在哪里

单击排序图标（向上和向下箭头）时，排序应该可以在服务器端工作

当点击th时，排序应该在本地工作。这是因为用户错误地点击了AD，服务器会承受不必要的负担

目标： 我想两者都保留

本地排序[单击AD not图标]（仅适用于当前表显示/页面中的数据）

服务器端排序[仅通过单击图标]

问题： DataTables使用css背景图像进行排序。这使得很难检测点击图标，因为据我所知，点击时无法捕获css背景图像

这是我提出的，但仍然没有进展

JSFIDDLE:

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');
});

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

    $('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();
        }
    });

更新-1:

$(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');
});

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

    $('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();
        }
    });

JSFIDDLE：

我可以先添加一个sortMask，然后单击它绑定。 SORTMAK是一个div，id添加到每列

->->

CSS:

$(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');
});

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

    $('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();
        }
    });

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');
});

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

    $('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();
        }
    });

---

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

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

请注意：您应该使用普通的

单击

而不是

单击.DT

，因为在这种情况下，它将在

数据表

之前触发

---

顺便说一句，请尝试让客户端做这些事情，因为如果有多个用户单击排序，服务器将有不必要的负载。您可以在“类似”中插入图标，然后单击图标，将其发送到服务器，然后发送$（'.sendToServer'）。在（'单击'，函数（e）{//服务器端编码；e.stopprogation（）；}）上除图标外，在AD上的任何位置单击图标都会正常排序单击表格标题进行排序是正常的预期用户行为，也是最常见的用户界面。没有意义，他们这样做是偶然的考虑我想要这两个选项，有一个服务器端排序只通过点击图标，和本地排序（是通过点击标签（不是图标））完成的。本地排序只对当前显示的记录进行。这是我的目标，让他们分开。