如何在DataTables单元格中添加两个条件显示的操作按钮

Hey there! Let's get this sorted out for you step by step since you're new to DataTables. I'll walk you through exactly how to add that action column with conditional buttons.

Step 1: Define the Action Column with Dynamic Rendering #

The key here is using DataTables' render function for your new column. This lets you build the button HTML dynamically based on the values in ColA and ColB. Assuming your document.pvm.tableContent() returns an array of objects with ColA and ColB properties, here's how to set it up:

// Initialize your DataTable
const table = $('#your-table-id').DataTable({
  data: document.pvm.tableContent(),
  columns: [
    // Add your existing columns first
    { data: 'ColA', title: 'Column A' },
    { data: 'ColB', title: 'Column B' },
    // Your new actions column
    {
      title: 'Actions',
      render: function(_, __, row) {
        // Calculate the difference between ColB and ColA
        const difference = row.ColB - row.ColA;
        
        // Start with the always-visible red "No" button
        let actionButtons = '<button class="action-btn action-btn-no">No</button>';
        
        // Add the green "OK" button only if difference is ±10
        if (difference === 10 || difference === -10) {
          actionButtons += '<button class="action-btn action-btn-ok">OK</button>';
        }
        
        return actionButtons;
      }
    }
  ]
});

Step 2: Style Your Buttons (Optional but Recommended) #

Add some CSS to make the buttons red/green as you wanted:

.action-btn {
  margin: 0 4px;
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.action-btn-no {
  background-color: #dc3545;
  color: white;
}

.action-btn-ok {
  background-color: #28a745;
  color: white;
}

Step 3: Bind Click Events to the Buttons #

Since DataTables renders rows dynamically, you'll need to use event delegation to make sure clicks on the buttons work even for rows added later:

// Handle "No" button clicks
$(document).on('click', '.action-btn-no', function() {
  // Get the data for the row containing the clicked button
  const rowData = table.row($(this).closest('tr')).data();
  
  // Replace this with your actual "No" action logic
  console.log('No button clicked for row:', rowData);
  // Example: call your custom function here
  // yourNoActionFunction(rowData);
});

// Handle "OK" button clicks
$(document).on('click', '.action-btn-ok', function() {
  const rowData = table.row($(this).closest('tr')).data();
  
  // Replace this with your actual "OK" action logic
  console.log('OK button clicked for row:', rowData);
  // yourOkActionFunction(rowData);
});

Quick Notes for Your Setup #

• Replace #your-table-id with the actual ID of your table element.
• If the property names in document.pvm.tableContent() aren't exactly ColA and ColB, update those to match your actual data structure.
• The render function's third parameter (row) gives you full access to all data in the current row, so you can use it to pass any needed info to your click handlers.

This should fix the issue you had with adding the red button, and also handle the conditional display of the green OK button perfectly.

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