如何对包含数字、字母及特殊字符的DataTable数据表进行排序？

Hey there! I’ve run into this exact issue before—DataTable’s default sorting treats everything as plain strings, so it’ll sort values like 100$ before 20A because it’s comparing character by character (the "1" in "100$" comes before "2" in "20A" in ASCII order). Let’s fix this with a couple of reliable solutions:

Solution 1: Custom Sorting Plugin (Frontend Processing) #

We’ll create a custom sorting function that extracts meaningful data from your mixed-value column, then tell DataTable to use this function for sorting that specific column.

First, register the custom sort type:

// Custom sort function: extract numeric values, fall back to lowercase strings for non-numeric entries
$.fn.dataTable.ext.type.order['mixed-numeric-pre'] = function(data) {
    // Remove all non-digit characters to get the numeric part
    const numericPart = data.replace(/[^0-9]/g, '');
    // Return numeric value if present, else lowercase the original string for consistent alphabetical sorting
    return numericPart ? parseInt(numericPart, 10) : data.toLowerCase();
};

Then update your DataTable initialization to use this sort type on your target column (replace [0] with the index of your mixed-value column, starting from 0):

$("#leader_board_table").DataTable({ 
    "language": { 
        "aria": { 
            "sortAscending": ": activate to sort column ascending", 
            "sortDescending": ": activate to sort column descending" 
        }, 
        "emptyTable": "Start buying to build your portfolio first!", 
        "info": "Showing _START_ to _END_ of _TOTAL_ entries", 
        "infoEmpty": "No entries found", 
        "infoFiltered": "(filtered from _MAX_ total entries)", 
        "lengthMenu": "_MENU_ entries", 
        "search": "Search:", 
        "zeroRecords": "No matching records found" 
    }, 
    "columnDefs": [
        { "type": "mixed-numeric-pre", "targets": [0] } // Target your mixed-value column here
    ],
    "lengthMenu": [ [5, 10, 15, 30, -1], [5, 10, 15, 30, "All"] ], 
    "pageLength": 10, 
    "searching": false, 
    "ordering": true, 
    "paging": true, 
    "bLengthChange": false, 
    "bPaginate": true, 
    "autoWidth": false, 
    "deferRender": false, 
    "bInfo": false, 
});

Variation for Alphanumeric First (e.g., A1, A10, A2) #

If your column has values like A1, A10, A2 and you want them sorted as A1, A2, A10, use this modified sort function instead:

$.fn.dataTable.ext.type.order['alphanumeric-pre'] = function(data) {
    // Separate letters and numeric parts
    const letters = data.replace(/[0-9]/g, '').toLowerCase();
    const numbers = data.replace(/[^0-9]/g, '');
    // Pad numbers with leading zeros to ensure proper numeric sorting after letters
    return letters + (numbers ? parseInt(numbers, 10).toString().padStart(10, '0') : '');
};

Then update the type in columnDefs to alphanumeric-pre.

Solution 2: Use data-order Attribute (Render-Time Processing) #

If you’re rendering your table server-side or have control over the HTML output, add a data-order attribute to each <td> with a normalized value that DataTable will use for sorting.

For example:

<!-- Original value: 100$ -->
<td data-order="100">100$</td>
<!-- Original value: 20A -->
<td data-order="20">20A</td>
<!-- Original value: 3# -->
<td data-order="3">3#</td>

DataTable automatically prioritizes the data-order value over the visible text, so sorting will work as expected without any extra JS configuration.

内容的提问来源于stack exchange，提问作者Uzair Khan