jQuery Datatables v1.9.2分页按钮重叠不可点击及右对齐配置方法

你遇到的分页按钮点不动、和每页条数下拉框重叠的问题，本质是两个配置和样式缺失导致的：

• 手写的sDom把所有功能元素无间隔平铺在同一文档流里，分页控件被相邻的下拉框元素的层叠区域完全挡住，根本触发不了点击事件
• 没有给两个分属左右排布的功能控件留独立的布局空间，默认流布局下很容易发生位置偏移、重叠

1. 替换错误的sDom初始化配置 #

先明确1.9.2版本sDom每个占位符的实际含义：

• l：每页显示条数选择下拉框
• f：搜索过滤输入框
• r：服务端请求的加载提示
• t：表格主体
• i：当前数据范围提示
• p：分页导航控件

你原来用的sDom: 'ifrtlp'是把所有元素按顺序直接排成一串，没有任何布局分区。需要替换成带独立底部容器的结构，方便后续通过CSS做左右对齐排布：

// 把原来的sDom配置整段替换成下面的内容
"sDom": '<"top"if>rt<"bottom"lp><"clear">',

这个配置会把l（条数下拉）和p（分页控件）统一放在底部容器里，顶部区域放数据提示和搜索框，最后加清除浮动的空div，避免上下布局串位。

2. 补充自定义样式实现右对齐、拉开间距、解决点击遮挡 #

在全局样式里增加针对DataTables组件的规则，直接解决重叠和点不动的问题：

/* 左侧放每页条数选择框 */
.dataTables_wrapper .dataTables_length {
  float: left;
  padding-right: 30px; /* 和右侧分页留够空白间距 */
  position: relative;
  z-index: 10;
}
/* 右侧放分页导航，实现右对齐 */
.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-left: 30px; /* 和左侧下拉保持足够距离 */
}
/* 保证分页按钮可以正常点击 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  cursor: pointer;
  margin: 0 3px;
  position: relative;
  z-index: 5;
}
/* 清除浮动影响 */
.dataTables_wrapper .clear {
  clear: both;
}

3. 最后校验项 #

• 确认页面引入了和当前1.9.2版本完全匹配的DataTables官方CSS文件，没有自定义全局样式覆盖分页按钮的点击区域
• 保持原有配置里bPaginate: true、bLengthChange: true的开启状态，不要额外修改分页的基础开关

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