如何在Datatable表头将"Show entries"的下拉框替换为复选框

实现步骤与代码示例 #

1. 隐藏默认长度选择控件

初始化DataTables时，通过dom配置项移除默认的"Show entries"区域（l代表长度选择器，从默认的lfrtip中去掉l即可）。

2. 添加自定义选择控件

在表格上方添加自定义的行数选择区域，用单选框模拟复选框样式（既符合需求中的视觉效果，又保证每页仅能选择一个行数）。

3. 绑定事件处理逻辑

给选择控件绑定change事件，调用DataTables的API修改每页显示行数并重新渲染表格。

完整代码

HTML结构

<!-- 自定义每页行数选择器 -->
<div class="custom-length-selector">
  每页显示行数：
  <label>
    <input type="radio" name="page-length" value="10" checked> 10
  </label>
  <label>
    <input type="radio" name="page-length" value="25"> 25
  </label>
  <label>
    <input type="radio" name="page-length" value="50"> 50
  </label>
  <label>
    <input type="radio" name="page-length" value="100"> 100
  </label>
</div>

<!-- DataTables 表格容器 -->
<table id="example" class="display" style="width:100%"></table>

JavaScript 初始化与事件绑定

$(document).ready(function() {
  // 初始化DataTables，隐藏默认长度选择器
  const table = $('#example').DataTable({
    dom: 'frtip', // 移除默认的长度选择控件（l）
    pageLength: 10,
    // 示例数据与列配置，可根据实际场景替换
    data: [
      [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
      [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
      [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ]
    ],
    columns: [
      { title: "姓名" },
      { title: "职位" },
      { title: "办公地点" },
      { title: "分机号" },
      { title: "入职日期" },
      { title: "薪资" }
    ]
  });

  // 监听选择器变化，修改每页行数
  $('input[name="page-length"]').on('change', function() {
    const rowCount = parseInt($(this).val());
    table.page.len(rowCount).draw();
  });
});

CSS 美化样式（匹配参考图效果）

.custom-length-selector {
  margin: 10px 0;
  padding-left: 10px;
  font-size: 14px;
}

.custom-length-selector label {
  margin-right: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* 将单选框改为复选框样式 */
.custom-length-selector input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-right: 6px;
  position: relative;
}

.custom-length-selector input[type="radio"]:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.custom-length-selector input[type="radio"]:checked::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

补充说明 #

• 如果确实需要使用原生复选框而非样式模拟，可将input[type="radio"]改为input[type="checkbox"]，但需在事件处理中添加逻辑保证仅保留最后选中的选项（因为每页只能设置一个行数）。
• 可根据需求调整可选的行数数值、样式细节等。

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