DataTables多列排序配置异常求助：自定义排序规则不生效

Hey there! Let's work through your DataTables sorting issues step by step. I see you've got very specific multi-column sorting rules and extra requirements, so let's break down what's going wrong and fix it together.

Key Issues in Your Current Code #

First, let's call out the main problems that are throwing off your sorting behavior:

• Duplicate Column Definitions: You're using both modern columnDefs and legacy aoColumnDefs syntax, which causes conflicts and unexpected behavior. We'll merge these into one clean block.
• Unstopped Default Sorting: When you click a table header, DataTables' built-in single-column sort runs first, overriding your custom multi-column logic. We need to block this default action.
• Incorrect Initial Sort: Your initial order setting only includes column 0, but your requirement specifies a full multi-column default sort sequence.
• Begin Time Column Handling: You need to lock this column to ascending order while preventing users from manually sorting it, which wasn't fully configured.

Fixed Code Implementation #

Here's the revised code with all fixes applied, plus comments explaining each change:

$(document).ready(function() {
    window.history.pushState("object or string", "EPAP|AuctionList", contextPath + "/auctions/auctionlist");
    languageList.sEmptyTable = '<spring:message code="auctionlist.emptytable"/>';
    
    auctionTable = $('#datatable').DataTable({
        language: languageList,
        // Set the correct default multi-column sort as per your requirement
        order: [[0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'], [6, 'asc'], [7, 'asc']],
        columnDefs: [
            // Define fixed sort sequences for allowed columns
            { targets: 0, orderSequence: ['desc'] },
            { targets: 1, orderSequence: ['asc'] },
            { targets: 4, orderSequence: ['asc'] },
            // Configure Begin Time column: non-sortable by user, but included in all sort sequences
            { targets: 5, orderSequence: ['asc'], type: "datetime-moment", orderable: false },
            { targets: 6, orderSequence: ['asc'] },
            { targets: 7, orderSequence: ['asc'] },
            // Disable sorting for columns 2, 3, 8 (merged from legacy aoColumnDefs)
            { targets: [2, 3, 8], orderable: false }
        ],
        initComplete: function () {
            $('#datatable th').on('click', function (event) {
                var th = $(this).closest('th');
                var colIndex = auctionTable.column(th).index();
                
                // Critical: Stop DataTables' default sorting from running
                event.stopPropagation();
                event.preventDefault();
                
                // Execute custom multi-column sort based on clicked column
                switch(colIndex) {
                    case 0:
                        console.log('Sorting by Column A (desc) first');
                        auctionTable.order([[0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'], [6, 'asc'], [7, 'asc']]).draw();
                        break;
                    case 4:
                        console.log('Sorting by Column E (asc) first');
                        auctionTable.order([[4, 'asc'], [0, 'desc'], [1, 'asc'], [5, 'asc'], [6, 'asc'], [7, 'asc']]).draw();
                        break;
                    case 5:
                        console.log('Sorting by Column F (asc) first');
                        auctionTable.order([[5, 'asc'], [0, 'desc'], [1, 'asc'], [4, 'asc'], [6, 'asc'], [7, 'asc']]).draw();
                        break;
                    case 6:
                        console.log('Sorting by Column G (asc) first');
                        auctionTable.order([[6, 'asc'], [0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'], [7, 'asc']]).draw();
                        break;
                    case 7:
                        console.log('Sorting by Column H (asc) first');
                        auctionTable.order([[7, 'asc'], [0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'], [6, 'asc']]).draw();
                        break;
                    // Columns 2,3,8 are non-sortable, so clicks here do nothing
                    default:
                        break;
                }
            });
        },
        ajax: {
            url: contextPath + "/auctions/dailyAuctionViewList",
            cache: false,
            async: false, // Fixed typo: "asyc" → "async"
            dataSrc: ""
        }
    });
});

Additional Notes to Confirm Behavior #

• No Repeat Click Action: Since we explicitly set the full sort sequence every time a header is clicked, repeated clicks won't change the sort direction (exactly matching your requirement).
• Begin Time Lock: The column is marked orderable: false so users can't click to sort it, but it stays in all your sort sequences to maintain ascending order.
• Cleaner Syntax: Merging column definitions removes conflicts and uses DataTables' modern recommended syntax.
• Fixed Typo: Corrected asyc to async in the AJAX settings to ensure proper loading behavior (note: setting async: false is not ideal for performance, but we kept it as per your original code).

内容的提问来源于stack exchange，提问作者Amita Yadav