AngularJS v1.4.0中Angular-DataTables浮点数排序异常求助

Hey there, let's work through your two problems—wonky sorting and missing stopPropagation functionality—with your AngularJS 1.4.0 and DataTables setup.

First: Fixing the Sorting Problem #

The root issue here is that your data.match() call doesn't have a regular expression to actually extract numeric values from your column data. Without a regex, match() just returns the full string, which means DataTables is doing string sorting (e.g., "1000" comes before "99" because "1" < "9") instead of numeric sorting. That's why you're only seeing the first 3 digits drive the sort.

Here's the revised code with proper numeric extraction:

$scope.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(6)
        .withOption('type', 'number')
        .renderWith(function(data, type, full) {
            if (type === 'sort') {
                // Use a regex to extract integers or decimals from the data
                const numMatch = data.match(/\d+\.?\d*/);
                if (numMatch && numMatch.length > 0) {
                    let value = parseFloat(numMatch[0]);
                    // Keep your existing logic for handling suffixes/extra characters
                    return value.toString().length !== data.length ? value + 0.0001 : value;
                }
                // Fallback if no number is found (adjust as needed for your use case)
                return 0;
            }
            return data;
        })
];

Key Changes: #

• Added /\d+\.?\d*/ regex to pull out numeric parts (works for integers like "123" or decimals like "123.45")
• Added a check to ensure we actually found a number before parsing
• Fixed the type comparison to use === for strict equality (best practice in JS)

Second: Adding stopPropagation Functionality #

To prevent event bubbling in your table cells, you have two straightforward options depending on your use case:

Option 1: Add it directly to rendered elements #

If you're returning HTML (like buttons or links) in the column, include $event.stopPropagation() in the ng-click handler:

.renderWith(function(data, type, full) {
    if (type === 'display') {
        // Example: A button that won't bubble clicks to the row/table
        return `<button ng-click="$event.stopPropagation(); handleRowAction(full)">Edit</button>`;
    }
    // Keep your sort/filter logic here...
})

Option 2: Bind it to the cell via rowCallback #

If you want to stop bubbling for the entire cell (not just a child element), use DataTables' rowCallback to attach a click handler:

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withRowCallback(function(row, data, index) {
        // Target the 7th column (index 6) and stop click propagation
        angular.element(row).find('td:eq(6)').on('click', function(e) {
            e.stopPropagation();
            // Add your cell click logic here if needed
        });
    });

Quick Compatibility Note #

Make sure your version of angular-datatables is compatible with AngularJS 1.4.0—versions around 0.5.6 are known to work well with 1.4.x releases.

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