jQuery数据表-如有必要,按多列排序

时间:2018-09-28 10:19:01

标签: javascript jquery datatables

我有这个html表:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 




<table class="table table-bordered" id="resourcesActivitysTable">
            <thead>
            <tr>
                <th>Order</th>
                <th>Priority</th>
                <th>Date</th>
           </tr>
           </thead>
           <tbody>
           <tr>
             <td>SomeString</td>
             <td>1</td>
             <td>28.09.2018</td>
           </tr>
           <tr>
             <td>SomeString</td>
             <td>3</td>
             <td>20.09.2018</td>
           </tr>
           <tr>
             <td>SomeString</td>
             <td>1</td>
             <td>27.09.2018</td>
           </tr>
           </tbody>
</table>
                

这是我的数据表配置:

$('#resourcesActivitysTable').dataTable({

        //"order": [[ 1, 'asc' ]],
        "aaSorting": [[1, "asc"]],
        "iDisplayLength": 10,
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,

        "language": {
            "sEmptyTable": "Keine Daten in der Tabelle vorhanden",
            "sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
            "sInfoEmpty": "0 bis 0 von 0 Einträgen",
            "sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ Einträge anzeigen",
            "sLoadingRecords": "Wird geladen...",
            "sProcessing": "Bitte warten...",
            "sSearch": "Suchen",
            "sZeroRecords": "Keine Einträge vorhanden.",
            "oPaginate": {
                "sFirst": "Erste",
                "sPrevious": "Zurück",
                "sNext": "Nächste",
                "sLast": "Letzte"
            },
            "oAria": {
                "sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
                "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
            }
        },
        "fnDrawCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var table = $('#resourcesActivitysTable').DataTable()

            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                //  getOrderStatus(data.orderID);
            });
        }
    });

Datatable按第二列(优先级)对数据进行排序。

我的问题是,如果“优先级”相同,则该表应按“日期”列排序。

这是我的愿望结果:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 




<table class="table table-bordered" id="resourcesActivitysTable">
            <thead>
            <tr>
                <th>Order</th>
                <th>Priority</th>
                <th>Date</th>
           </tr>
           </thead>
           <tbody>
           <tr>
             <td>SomeString</td>
             <td>1</td>
             <td>27.09.2018</td>
           </tr>
           <tr>
             <td>SomeString</td>
             <td>1</td>
             <td>28.09.2018</td>
           </tr>
           <tr>
             <td>SomeString</td>
             <td>3</td>
             <td>20.09.2018</td>
           </tr>
           
           </tbody>
</table>
                

这里有人知道如何在优先级相同的情况下按日期对表格数据进行排序吗?

1 个答案:

答案 0 :(得分:0)

我们可以对数据表中的多列进行排序。请检查以下代码,

"order": [[ 0, 'desc' ],[ 1, 'asc' ]]

在上面,0表示表的第一列。 1表示第二列。