数据表html与包含无序列表

时间:2016-05-12 12:48:56

标签: sorting datatables

任何人都可以帮我解决我有DataTables的排序问题。我需要按降序排序表格的第一列。该列包含一些带有无序列表的单元格。我想要的是它使用第一个列表项的内容对带有无序列表的单元格进行排序。我正在使用columnDefs类型的html,但这还不足以解决这个问题。排序系统地使用表格底部的无序列表对单元格进行排序,而不是按逻辑顺序排序。

我已经设置了一个jsfiddle来说明问题:https://jsfiddle.net/lbriquet2/ka59nb5q/

$(document).ready(function() {
$('#example').DataTable({
"order": [[ 0, "desc" ]],
"columnDefs": [
        {"type": "html", "targets": [ 0 ] },
        {"width": "50%", "targets": [ 0, 1 ] }
        ]    
}    
);} );

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您可以使用自定义函数扩展排序,如下所示:

// register custom sorting function
$.fn.dataTable.ext.order['dom-list'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        // if there is ul>li we get the value of first
        var $first_li = $('ul li:first', td);
        if($first_li.length > 0) {
            return $first_li.text();
        }
        // there is no ul>li in td we get its value
        return $(td).text();
    } );
};

$(document).ready(function() {
    $('#example').DataTable({
            "order": [[ 0, "desc" ]],
            "columns": [
                { "orderDataType": "dom-list" },// set order type to custom function
                null
            ],
            "columnDefs": [
                {"width": "50%", "targets": [ 0, 1 ] }
            ]
        }
    );
});