为DataTables分页添加CSS三角形箭头（无需官方CSS插件）

我明白你遇到的困扰了——用CSS边框绘制三角形时，很容易因为容器尺寸、溢出设置或者布局冲突导致形状被裁切。咱们不用依赖DataTables官方CSS，纯自定义样式就能完美解决这个问题，下面是具体的方案：

核心思路 #

1. 隐藏分页按钮里原有的<和>文本，避免和CSS三角形冲突
2. 利用CSS伪元素（::before）绘制三角形，完全控制形状和位置
3. 调整按钮的布局属性，确保三角形有足够的显示空间，不会被裁切

完整CSS代码示例 #

/* 重置分页按钮的基础样式，清除默认的padding、border等 */
.dataTables_paginate .paginate_button {
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* 关键：禁止设置overflow:hidden，否则三角形会被裁切 */
}

/* 隐藏按钮内的原有文本（< 和 >） */
.dataTables_paginate .previous,
.dataTables_paginate .next {
  font-size: 0; /* 通过将字体设为0让文本消失 */
}

/* 绘制上一页的向左三角形 */
.dataTables_paginate .previous::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #333; /* 可自定义三角形颜色 */
}

/* 绘制下一页的向右三角形 */
.dataTables_paginate .next::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #333; /* 可自定义三角形颜色 */
}

/* 可选：添加hover状态的样式 */
.dataTables_paginate .paginate_button:hover .previous::before {
  border-right-color: #007bff;
}
.dataTables_paginate .paginate_button:hover .next::before {
  border-left-color: #007bff;
}

关键注意事项 #

• overflow: visible：这是解决裁切问题的核心！很多开发者会给按钮设置overflow:hidden来处理溢出内容，但这会直接裁切掉三角形的超出部分，所以一定要保持这个属性为visible（默认值就是visible，只要不主动设置hidden即可）。
• 类名匹配：如果你的DataTables分页组件使用了自定义类名（比如修改了pagingType选项），请将代码中的.dataTables_paginate、.paginate_button、.previous、.next替换为你实际项目中的类名。
• 尺寸调整：可以通过修改伪元素的border宽度值来调整三角形的大小，比如把6px改成8px、8px改成10px，就能得到更大的三角形。

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