如何在DataTables中按數字對下拉列表進行排序

Question

我有這個代碼。 它所做的只是簡單地與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>' ) } ); } ); } } ); } ); 

 <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列未進行數字排序。 這是屏幕截圖：

如何啟用呢？ 這與其他問題不同，因為它特定於數據表。

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", "$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>' ) } ); } ); } } ); } ); 

 <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

解

列數據類型由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);
} 

演示

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

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

筆記

有關更多詳細信息和進一步的討論，請參見GitHub上的問題661 。

Answer 3

不必具有sort（）方法。

因此，只需更改它：

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

請找到JSFIDDLE

編輯 ：添加unique（）（我已刪除錯誤）+更新jsfiddle