DataTables修改单元格内容后无法搜索的问题咨询

Ah, I see the issue here! The problem is that when you modify the 6th column's HTML using createdRow, you're only changing what's visible in the DOM—but DataTables doesn't use the DOM content for searching or filtering. It relies on the original data source you passed to the table (the data array in your case).

Let me break it down: when you initialize the table, DataTables stores the original data array internally. Any search or filter operations run against this stored data, not the updated HTML you added later in createdRow. Since your original data[6] doesn't contain "Yes" or "No", searching for those terms returns no results.

Fix 1: Use columns.render (Recommended) #

The cleanest way to handle this is to use DataTables' built-in columns.render option. This function lets you define what gets displayed in the column, and also ensures that the rendered value is used for searching, sorting, and exporting.

Here's how to update your code:

var force_table = $('#force-table').DataTable({ 
    "scrollY": 400, 
    "scrollX": true, 
    "paging": false, 
    dom: 'Bfrtip', 
    "oSearch": {"bSmart": false}, 
    buttons: [ 
        { 
            extend: 'excel', 
            text: 'Export to Excel', 
        } 
    ],
    // Add columns configuration
    "columns": [
        null, null, null, null, null, null, // First 6 columns (indexes 0-5)
        {
            "render": function(data, type, row) {
                // `type` tells us what the value is being used for:
                // 'display' = what shows in the table
                // 'filter' = what's used for searching
                // 'sort' = what's used for sorting
                // 'export' = what gets exported to Excel
                
                if (row[9] > 1 && row[10] > 1) {
                    return 'Yes';
                } else {
                    return 'No';
                }
            }
        },
        null, null, null, null // Columns 8-11 (indexes 7-10)
    ],
    "createdRow": function ( row, data, index ) { 
        // Keep your existing class logic here
        if ( data[8] > 1) { 
            $('td', row).eq(8).addClass('green'); 
        } else { 
            $('td', row).eq(8).addClass('orange'); 
        } 
        if ( data[9] > 1) { 
            $('td', row).eq(9).addClass('green'); 
        } else { 
            $('td', row).eq(9).addClass('orange'); 
        } 
        if ( data[10] > 1) { 
            $('td', row).eq(10).addClass('green'); 
        } else { 
            $('td', row).eq(10).addClass('orange'); 
        }
        // Remove the HTML modification for column 6—render handles it!
    } 
});

This works because DataTables will use the value returned by render for both display and searching. Now when you search for "Yes" or "No", it will match the rendered values, and your Excel export will also include those terms (which is a nice bonus).

Fix 2: Update the Stored Data (If You Must Use createdRow) #

If you really want to stick with createdRow, you need to update DataTables' internal stored data for the cell, not just the DOM. Here's how:

"createdRow": function ( row, data, index ) { 
    // ... keep your existing class logic ...

    // Update both DOM and stored data
    let status = (data[9] > 1 && data[10] > 1) ? 'Yes' : 'No';
    $('td', row).eq(6).html(status);
    // Update DataTables' internal data store for this cell
    force_table.cell(row, 6).data(status);
}

This tells DataTables to replace the original data[6] value with "Yes" or "No", so searches will now work. However, this approach is less efficient than using columns.render because it modifies the data after rendering, and will run every time the table redraws.

Key Takeaway #

Always use columns.render when you need to transform data for display, search, or export. It's the intended way to handle this in DataTables and avoids common pitfalls like the one you ran into.

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