Datatables 1.10 仅通过单击排序图标

Posted 2023-05-07

【中文标题】Datatables 1.10 仅通过单击排序图标

【英文标题】：Datatables 1.10 sort only by cliking sort icons in th

【发布时间】：2015-02-03 18:10:34

【问题描述】：

我使用的是datatables 1.10 版。 我有一个要求，

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

目标： 我想保留两个

本地排序[点击广告而不是图标]（仅针对当前在表格显示/页面中的数据） 服务器端排序[仅通过单击图标]。

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

UPDATE-1：

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

我能够通过添加一个 sortMask 并在其上绑定单击来领先一步。 sortMask 是一个 id 添加到每一列的 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();
        
    );

【问题讨论】：

顺便说一句，试着让客户端做这些事情，因为如果你有几个用户点击排序，服务器就会有不必要的负载。

你能在

中插入图标​​，例如 然后点击图标，将其发送到服务器，然后 $('.sendToServer').on('click',function(e) // 服务器端编码 ; e.stopPropogation(); ) 以及除图标外的任何位置，如果他点击它，它将被正常排序

单击表格标题进行排序是正常的预期用户行为和最常见的用户界面。他们偶然这样做是没有意义的

考虑我想要两个选项，服务器端排序仅通过单击图标，本地排序（通过点击头（不是图标）完成）。本地排序仅对当前的记录进行在显示中。我的目标是让它们分开。

【参考方案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/