如何在DataTables中以数字方式对下拉列表进行排序

Question

我有这个代码。它所做的只是用数据表显示并将每列的下拉选择过滤器放在底部。

var dataSet = [
  [1,"Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
  [2,"Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
  [10,"Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
  [3,"Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
  [5,"Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
  [9,"Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
  [12,"Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
  [23,"Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
  [99,"Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];

 $(document).ready(function() {

var columns = [
    {title: "ID"},
    {title: "Name"}, 
    {title: "Position"}, 
    {title: "Office"}, 
    {title: "Extn."}, 
    {title: "Start date"}, 
    {title: "Salary"}
];

// Footer construction
var $tfoot = $("#example tfoot tr");
for (var i = 0, len = columns.length; i < len ; i++){
    $tfoot.append("<th>");
}

$('#example').DataTable( {
    data: dataSet,
    columns: columns,
    initComplete: function (setting, json) {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
 
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
 
            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    } 
    
} );
} );

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>

<table id="example" class="display" width="100%">
<tfoot><tr></tr></tfoot>
</table>

正如您在运行代码段之后看到的那样，第一个 ID 列未按数字排序。这是屏幕截图：

如何启用它？这与其他问题不同，因为它特定于 DataTables。

Answer 1

原因

默认情况下，没有定义排序顺序的函数的数组排序方法会将您的数组排序为字符串，因此您得到的结果是预期的。您可以在此处阅读更多信息 - Array.prototype.sort()。因此，您需要添加一个函数来对数字和字符串的数据进行正确排序。

解决方案

添加 sortFunction 函数并将其用作 sort() 函数的参数，如下所示：

var sortFunction = function(a, b) {
    if(a < b) return -1;
    if(a > b) return 1;
    return 0;
};

column.data().unique().sort(sortFunction).each( function ( d, j ) {

演示版

var dataSet = [
  [1,"Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
  [2,"Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
  [10,"Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
  [3,"Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
  [5,"Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
  [9,"Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
  [12,"Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
  [23,"Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
  [99,"Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];

 $(document).ready(function() {

var columns = [
    {title: "ID"},
    {title: "Name"}, 
    {title: "Position"}, 
    {title: "Office"}, 
    {title: "Extn."}, 
    {title: "Start date"}, 
    {title: "Salary"}
];

// Footer construction
var $tfoot = $("#example tfoot tr");
for (var i = 0, len = columns.length; i < len ; i++){
    $tfoot.append("<th>");
}

$('#example').DataTable( {
    data: dataSet,
    columns: columns,
    initComplete: function (setting, json) {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
 
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
 
                var sortFunction = function(a, b) {
                    if(a < b) return -1;
                    if(a > b) return 1;
                    return 0;
                };
                column.data().unique().sort(sortFunction).each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    } 
    
} );
} );

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>

<table id="example" class="display" width="100%">
<tfoot><tr></tr></tfoot>
</table>

Answer 2

没有必要使用 sort() 方法。

所以，只需更改它：

column.data().unique().each( function ( d, j ) {
    select.append( '<option value="'+d+'">'+d+'</option>' )
});

请找到JSFIDDLE

编辑：添加 unique() （我错误地删除了）+更新 jsfiddle

Answer 3

解决方案

列数据类型在初始化时由jQuery DataTables自动确定，参见data types默认支持。

在initComplete函数中，您可以暂时按升序对每一列进行排序，然后在添加所有下拉框后恢复初始顺序，请参见下面的代码。

initComplete: function (settings, json) {
    // Get initial order
    var orderInit = this.api().order();
    
    this.api().columns().every( function (index) {
        var column = this;
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );

                column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
            } );

        // NOTE: Temporarily sort the column data before retrieving it
        // with data() function.
        column.order('asc').draw(false).data().unique().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
  
    // Restore initial order
    this.api().order(orderInit).draw(false);
}

演示

var dataSet = [
  [1,"Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
  [2,"Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
  [10,"Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
  [3,"Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
  [5,"Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
  [9,"Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
  [12,"Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
  [23,"Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
  [99,"Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];

$(document).ready(function() {

var columns = [
    {title: "ID"},
    {title: "Name"}, 
    {title: "Position"}, 
    {title: "Office"}, 
    {title: "Extn."}, 
    {title: "Start date"}, 
    {title: "Salary"}
];

// Footer construction
var $tfoot = $("#example tfoot tr");
for (var i = 0, len = columns.length; i < len ; i++){
    $tfoot.append("<th>");
}

$('#example').DataTable( {
    data: dataSet,
    columns: columns,
    initComplete: function (settings, json) {
        // Get initial order
        var orderInit = this.api().order();
        
        this.api().columns().every( function (index) {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
 
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
 
            column.order('asc').draw(false).data().unique().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
      
        // Restore initial order
        this.api().order(orderInit).draw(false);
    } 
    
} );
} );

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>

<table id="example" class="display" width="100%">
<tfoot><tr></tr></tfoot>
</table>

注意事项

有关详细信息和进一步讨论，请参阅 issue #661 on GitHub。

如何在DataTables中以数字方式对下拉列表进行排序

How to sort drop down list numerically in DataTables

html

javascript

jquery

json

datatables

解决方案

演示

注意事项