解决Datatables自动生成的序号列样式偏移

又名记一次开源组件的踩坑和填坑历程

起因

在上个项目中使用了Angularjs框架后（8102年了我们居然还在用Angularjs），需要根据后端传的数据生成表格展示，数据的每列表头完全是未知的，只约定了具体格式。此时原本使用轻度框架ng-table无法实现该功能，ng-repeat可以实现，但自定义的排序directive调试后无法使用。
网上搜了一下就决定使用Datatables作为轮子。

根据官网教程配置了表格生成，没问题。But！在添加了序列号后问题来了。 在一些表头不长的表格中显示是没有问题的，但在一些表头过长需要滚动时，序列号列不知为什么会发生列偏移的情况……bug样式如下图（因为项目无法截图就使用画图示意）。

解决方法

网上搜索了很多办法都无法解决，最后自己覆写了Datatables的样式才成功解决了这个问题.

Html代码

<!-- 在class中添加sortDataTables定位 -->
<table class="table table-condensed table-bordered 
table-striped table-hover sorDataTable">
    <thead></thead>
    <tbody></tbody>
</table>

js代码

需要注意的是：因为需要在Datatables样式加载后才能覆写样式，所以需要定时延迟后再执行该方法

//延迟使用
function loadingTable(){
    let table = $(".sortDataTable").DataTable({
        //在序号列添加class
        createdRow : function (row){
            $("td",row).eq(0).addClass("order-col")
        },
        //自定义表格数据
        data: $scope.data,
        autoWidth: true,
        serverSide : false,
        ordering : true,
        paging: false,
        //自定义Y轴超过428px后开启表格滚动，保持表头不变
        scrollY : "428px",
        searching: false,
        //自定义表头
        columns: columnData,
        //X轴开启滚动
        scrollX : true,
        scrollCollapse : true,
        info : false,
        columnDefs : [
            //序号列不开启排序
            {
                orderable : false,
                targets : 0
            },
            {
                render:function(data,type,row,meta){
                    //处理不存在的数据
                    if (data === undefined || data === null){
                        return ""
                    } else {
                        if (typeof data === "string"){
                            //处理数据中的单引号和双引号
                            if (data.indexOf("\'") !== -1){
                                return '<span title="' + data + '">' + data + '</span>'
                            } else if (data.indexOf("\"") !== -1){
                               return "<span title='" + data + "'>" + data + "</span>"
                            } else {
                                return '<span title="' + data + '">' + data + '</span>'
                            }
                        } else {
                            return '<span title="' + data + '">' + data + '</span>'
                        }
                    }
                },
                targets : "_all"
            }
        ],
        order : [[1,'asc']]
    });
    //添加序号列
    table.on('order.dt',function(){
        table.column(0,{
            prder: 'applied'
        }).nodes().each(function(cell,i){
            cell.innerHTML = i+1
        });
        //序号列固定宽度
        $(".order-col").css({"width" : "40px"})
    }).draw();
    /**
     *在固定表头，滚动数据后，Datatables会将表头和数据渲染为两个表格，此时
     *根据className为sortDataTable获取的为一个数组，[1]中获取的为数据的宽度，
     *[0]中获取的为表头宽度，此时使用数据宽度覆写表头宽度，可以达到对齐整体表格的目的。
     **/
    let width = document.getElementsByClassName("sortDataTable")[1].style.width;
    let theadWidth = document.getElementsByClassName("sortDataTable")[0];
    theadWidth.style.width = width;
    //再次覆写序号列固定宽度
    $(".order-col").css({"width" : "40px"})
}