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

Question

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

nev*_*int 1 html javascript jquery json datatables

我有这个代码.它的作用是简单地使用DataTables显示,并为底部的每一列放置下拉选择过滤器.

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

正如您在运行代码段后所看到的那样,第一个ID列未按数字排序.这是截图:

怎么能启用呢？这与其他问题不同,因为它特定于DataTables.

Answer 1

Yur*_*iuk 5

原因

默认情况下,没有定义排序顺序的函数的数组排序方法会将您的数组排序为一个字符串,因此您可以获得所需的结果.你可以在这里阅读更多信息 - 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 ) {

Run Code Online (Sandbox Code Playgroud)

DEMO

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

@Hacketo - 你确定吗？`return a - b`仅适用于数字,但我们正在比较数字和字符串.所以我们需要重构整个代码 - 首先验证列中的值是数字还是字符串,然后使用适当的排序函数. (2认同)

Answer 2

Gyr*_*com 5

解

列数据类型由jQuery DataTables在初始化期间自动确定,请参阅默认支持的数据类型.

在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);
}

Run Code Online (Sandbox Code Playgroud)

DEMO

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

笔记

有关更多详细信息和进一步讨论,请参阅GitHub上的问题#661.

归档时间：	10 年，8 月前
查看次数：	2474 次
最近记录：	9 年，3 月前