共计 875 个字符，预计需要花费 3 分钟才能阅读完成。
自用笔记，如有错误请指正。
<!– 插件 js –><script src=”https://cdn.datatables.net/fi…;></script>
<!– 手机端样式 控制文字不换行 –>@media (max-width: 767px) {
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
}
}
<!– 初始化选项 –>$(“#table_table”).dataTable({
“filter”: false,
“destroy”: true,
“lengthChange”: true,
“searching”: false,
“ordering”: false,
“stateSave”: false, // 不记住 状态
“bDestory”: true,
“info”: true,
“autoWidth”: false,
“serverSide”: true,
“processing”: true,
“scrollX”: “1200px”,
//”scrollXInner”: “500%”,
//”scrollX”: true,// x 方向滚动
//”displayLength”:”1200″,
“scrollCollapse”: false, // 可滚动控制 y 方向
“fixedColumns”: {// 固定列的配置项
leftColumns: 1, // 固定左边第一列
// rightColumns:1 // 固定右边第一列
},
其中这两个选项是关键，阅读了官方文档，scrollXInner 这个选项已经不建议使用，会引起表头和表格对不齐这种问题，官方是为了维护用户旧代码才保留了这个选项。这点很关键，一开始我作出的效果整个都是不对齐的。“scrollX”: “”,”scrollXInner”: “”,
“aoColumnDefs”: [
{“sWidth”: “20%”, “aTargets”: [ 1] }
],
这个选项空着列宽的时候，手机端好像并不适用，需要注意一下，所以才出现了 css 中 nowrap 控制文字不换行这个操作，这一步也是官方文档推荐的