Question

大事

也许我的问题很基本，但是这样做时我遇到了一些问题。我的数据表无法执行ScrollX，并且当我添加scrollX时：true，与thead和tbody的对齐方式不匹配。

我不是使用自己的CSS，而是使用ElaAdmin，引导程序和数据表中的一些CSS。我从CDN附加的引导程序和数据表。

在表格标签中，我只使用这种样式

<table id="example" class="table table-striped table-bordered table-sm" style="width:100%">

以及来自javascript

<script>
    (function($){
       var s = $('#example').DataTable({
            "scrollX": true,
            "processing" : true,
            "serverSide" : true,
            
            "ajax" : {
                url:"{{ route('example.index') }}",
                type: "GET",
            },
            "columns":[
                {data:'No', name:'PH.No', searchable:true},
                {data:'col1', name:'PH.col1', searchable:true},
                {data:'col2', name:'PL.col2', searchable:true},
                {data:'col3', name:'PL.col3', searchable:true},
                {data:'col4', name:'PL.col4', searchable:true},
                
            ],
            "order":[[0, 'desc']],

            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty()).on('change', function () {
                        column.search($(this).val(), false, false, true).draw();
                    });
                });
            },
        });
        
        
    })(jQuery);
</script>

但是，当我删除scrollX：true时，thead和tbody的对齐方式是正常的。当我添加scrollX时，滚动不消失并且对齐不匹配。

谢谢。我希望任何人都能帮助我解决这个问题

DataTable ServerSide scrollX无法正常工作，并且标头表与表主体未对齐

0 个答案: