ASP.NET Core MVC中DataTable表头单选按钮默认选中ALL的实现

开发者阿泽

2026-6-26

解决DataTable表头单选按钮默认选中ALL的问题

问题原因

DataTable初始化时会重新渲染表头DOM，你原本写在HTML字符串里的checked属性会被重置，导致默认选中状态失效。

解决方案

1. 修正表头HTML并添加DataTable初始化回调

修改表头的HTML字符串，确保ALL单选按钮的checked属性规范，同时在DataTable的initComplete回调中强制设置选中状态（这一步是关键，避免DataTable渲染覆盖默认状态）：

$('#your-table').DataTable({
  columns: [
    // 其他列配置
    {
      title: '<div>' +
             '<label>Is Active ? </label><br>' +
             '<input type="radio" name="foo" id="filter-active" value="1" /> Active<br>' +
             '<input type="radio" name="foo" id="filter-non-active" value="0" /> Non Active<br>' +
             '<input type="radio" name="foo" id="filter-all" value="" checked="checked" /> ALL' +
            '</div>',
      data: 'IsActive' // 替换为你的列数据字段名
    }
  ],
  initComplete: function() {
    // 初始化完成后确保ALL单选按钮处于选中状态
    $('#filter-all').prop('checked', true);
    // 触发一次过滤，确保默认显示全部数据
    $('#filter-all').trigger('change');
  }
});

2. 绑定单选按钮的过滤逻辑

为单选按钮添加change事件监听，实现列数据过滤：

$(document).on('change', 'input[name="foo"]', function() {
  const selectedValue = $(this).val();
  const table = $('#your-table').DataTable();
  // 替换为对应列的索引（从0开始计数）
  const targetColumnIndex = 2;

  if (selectedValue === '') {
    // 清空搜索条件，显示全部数据
    table.column(targetColumnIndex).search('').draw();
  } else {
    // 根据选中值过滤列数据
    table.column(targetColumnIndex).search(selectedValue).draw();
  }
});