Question

我正在使用datatables版本1.10。我有一个要求

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

目的： 我想保留两者

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

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

UPDATE-1：

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

我能够通过添加sortMask然后绑定点击它来提前一步。 sortMask是一个div，其ID添加到每列<thead> -> <tr> -> <th>

enter image description here 的 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();
});

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

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

数据表1.10仅通过单击排序图标进行排序

1 个答案: