如何防止jQuery DataTable分页或排序时重置自定义样式？

我懂你的痛点——DataTables在分页、排序或者搜索后会重新渲染分页控件，你一开始初始化时给分页按钮加的label-page类和自定义ID都会被冲掉，所以样式就没了。下面给你两种靠谱的解决办法：

方法1：利用DataTables的draw.dt事件重新绑定样式 #

DataTables每次重绘表格（包括分页、排序、搜索操作）都会触发draw.dt事件，我们可以把设置样式的逻辑封装成函数，在初始化后和每次重绘时都执行：

$(document).ready(function () {
  $.fn.DataTable.ext.pager.numbers_length = 5;
  
  // 封装设置分页样式的函数
  function setPaginationStyles() {
    let paginationElements = document.querySelectorAll("#news_paginate > span .paginate_button");
    paginationElements.forEach(function (value, key, nodeList) {
      value.setAttribute("class", "label-page");
      value.setAttribute("id","toggle-" + key);
    });
  }

  $('#news').DataTable({
    rowReorder: true,
    dom: '<"filter-controls-wrapper"f><"table-box" t><"pagination-wrapper"p>'
  });

  // 初始化后先执行一次
  setPaginationStyles();
  // 每次表格重绘时重新执行
  $('#news').on('draw.dt', setPaginationStyles);
});

这样不管表格怎么刷新，分页按钮的样式都会被重新加上，就不会消失了。

方法2：直接用CSS优先级覆盖（更推荐） #

其实你完全不用修改DOM元素的类，直接针对DataTables默认生成的分页按钮类写样式，通过CSS选择器优先级来覆盖默认样式，这样连JS都不用额外写：

/* 直接针对DataTables默认的分页按钮类写样式 */
.dataTables_paginate .paginate_button {
  width: 80px ;
  height: 25px ;
  margin: 0 10px ;
  border-radius: 999px ;
  background: crimson ;
  cursor: pointer;
  box-shadow: 0 5px 5px -5px rgba(220, 20, 60, 0.15), 0 10px 10px -5px rgba(220, 20, 60, 0.15), 0 15px 15px -5px rgba(220, 20, 60, 0.15), 0 20px 20px -5px rgba(220, 20, 60, 0.15) ;
  transition: 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 10px;
  border: none; /* 去掉DataTables默认的边框 */
}

.dataTables_paginate .paginate_button:hover {
  width: 120px;
  background: crimson; /* 覆盖默认hover背景色 */
}

/* 选中当前页的样式也可以一起自定义 */
.dataTables_paginate .paginate_button.current {
  background: darkred;
}

这种方法更简洁，因为DataTables不会移除默认的.paginate_button类，所以你的样式会一直生效，不需要依赖JS事件。注意把之前的label-page相关样式替换成上面的代码，同时记得覆盖默认的hover和当前页样式，避免冲突。

为什么!important没用？ #

因为DataTables在重绘时会给分页按钮重新添加内联样式或者更高优先级的类，!important有时候也顶不住，而且用!important不是最佳实践，上面两种方法都比它靠谱。

内容的提问来源于stack exchange，提问作者Something in common