如何修改Bootstrap中DataTables的Show entries和Search的HTML与CSS？

一、修改CSS样式 #

由于DataTables的“Show entries”和“Search”组件是动态生成的，直接通过类选择器编写自定义CSS并覆盖默认样式即可，注意将自定义CSS放在DataTables和Bootstrap的CSS引入之后，保证优先级足够。

针对「Show entries」的样式修改示例 #

/* 调整容器间距 */
.dataTables_length {
  margin: 1rem 0;
}
/* 自定义label布局与字体 */
.dataTables_length label {
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 美化下拉选择框 */
.dataTables_length select {
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid #ced4da;
  background-color: #fff;
}

针对「Search」的样式修改示例 #

/* 调整容器间距 */
.dataTables_filter {
  margin: 1rem 0;
}
/* 自定义label布局与字体 */
.dataTables_filter label {
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 美化搜索输入框 */
.dataTables_filter input[type="search"] {
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid #ced4da;
  min-width: 200px;
}

二、移动端调整HTML结构（保留原有组件功能） #

因为组件是动态生成的，无法直接修改源码，需通过JavaScript监听DataTables初始化完成事件，再操作DOM结构调整布局，结合CSS媒体查询实现响应式适配。

实现步骤与代码示例 #

1. 监听DataTables初始化事件，确保组件生成后再操作
2. 提取组件内的文本节点与控件，重构DOM结构
3. 通过窗口宽度判断移动端，配合CSS调整布局

// 监听DataTables初始化完成事件
$(document).on('init.dt', function(e, settings) {
  // 仅处理目标表格tblData
  if (settings.sTableId !== 'tblData') return;

  // 重构「Show entries」组件结构
  const lengthLabel = $('#tblData_length label');
  // 提取文本内容
  const labelParts = lengthLabel.text().trim().split('entries');
  // 创建新的结构元素
  const textSpan = $('<span class="length-text">' + labelParts[0].trim() + '</span>');
  const selectWrap = $('<div class="length-select-wrap"></div>').append(lengthLabel.find('select'));
  // 替换原有label内容
  lengthLabel.empty().append(textSpan).append(selectWrap).append('<span class="entries-text"> entries</span>');

  // 重构「Search」组件结构
  const filterLabel = $('#tblData_filter label');
  const searchText = filterLabel.contents().filter(node => node.nodeType === 3).text().trim();
  const inputWrap = $('<div class="search-input-wrap"></div>').append(filterLabel.find('input'));
  filterLabel.empty().append('<span class="search-text">' + searchText + '</span>').append(inputWrap);

  // 响应式布局调整函数
  function adjustMobileLayout() {
    const isMobile = window.innerWidth < 768;
    lengthLabel.toggleClass('mobile-layout', isMobile);
    filterLabel.toggleClass('mobile-layout', isMobile);
  }

  // 初始化执行一次
  adjustMobileLayout();
  // 监听窗口 resize 事件
  $(window).on('resize', adjustMobileLayout);
});

配套移动端CSS #

@media (max-width: 767px) {
  .dataTables_length label.mobile-layout,
  .dataTables_filter label.mobile-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .dataTables_filter label.mobile-layout .search-input-wrap input {
    min-width: 100%;
  }
}

这样既保留了组件原有功能，又能实现自定义样式与移动端布局适配。

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