数据表1.10只能通过在中添加排序图标来排序

Question

我使用的数据表版本1.10.我有一个要求

1. 当点击排序图标(向上和向下箭头)时,排序应该在服务器端工作
2. 当点击时,排序应该在本地工作.这是因为用户错误地点击了thead并且服务器受到了不必要的负担.

目标: 我想保留两者

1. 本地排序[单击thead not icons](仅适用于当前在表格显示/页面中的数据)
2. 服务器端排序[仅通过单击图标].

问题: DataTables使用css background-image进行排序.这使得难以检测点击图标,因为根据我的知识,无法在点击上捕获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();
        }
    });

Answer 1

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

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

和：

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

请注意：您应该使用普通的clickEven 而不是，click.DT因为在这种情况下它将在DataTables1 之前被触发。

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