完成datatable表格第一列在手机端牢固

2024年4月9日 175次阅读 来源: 非玉

自用笔记，若有毛病请斧正。

<!– 插件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掌握笔墨不换行这个操纵，这一步也是官方文档引荐的

参考链接官方文档

    原文作者：非玉
    原文地址: https://segmentfault.com/a/1190000018755101
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞