实现datatable表格第一列在手机端固定

自用笔记，如有错误请指正。

<!-- 插件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控制文字不换行这个操作，这一步也是官方文档推荐的

参考链接官方文档