Question

我正在使用数据表，我有20列。我试图强制滚动水平，但它不起作用，它试图在没有滚动条的单个页面中绘制没有滚动的表。

如何做到这一点？

我有（我已删除了一些列）：

activitiesTable = $('#activitiesTable').DataTable({
                scrollX: true,
                ScrollXInner: "200%",
                ajax: {
                        url: "{!! route('listOfActivitiesPerUserAjax') !!}",
                        type: "POST",
                    },
                columns: [
                    { name: 'manager_id', data: 'manager_id' },
                    { name: 'manager_name', data: 'manager_name', width: '150px' },
                    { name: 'user_id', data: 'user_id' },
                    { name: 'user_name', data: 'user_name' , width: '150px'},
                    { name: 'project_id', data: 'project_id' },
                    { name: 'project_name', data: 'project_name' },
                    { name: 'year', data: 'year' },
                    { name: 'jan_com', data: 'jan_com', width: '30px', searchable: false },
                    { name: 'jan_otl', data: 'jan_otl', width: '10px', searchable: false },
                    { name: 'feb_com', data: 'feb_com', width: '30px', searchable: false },
                    { name: 'feb_otl', data: 'feb_otl', width: '10px', searchable: false },
                    { name: 'mar_com', data: 'mar_com', width: '30px', searchable: false },
                    { name: 'mar_otl', data: 'mar_otl', width: '10px', searchable: false },
                    { name: 'apr_com', data: 'apr_com', width: '30px', searchable: false },
                    { name: 'apr_otl', data: 'apr_otl', width: '10px', searchable: false },
                    { name: 'may_com', data: 'may_com', width: '30px', searchable: false },
                    { name: 'may_otl', data: 'may_otl', width: '10px', searchable: false },
                    { name: 'jun_com', data: 'jun_com', width: '30px', searchable: false },
                    { name: 'jun_otl', data: 'jun_otl', width: '10px', searchable: false },
                    { name: 'jul_com', data: 'jul_com', width: '30px', searchable: false },
                    { name: 'jul_otl', data: 'jul_otl', width: '10px', searchable: false },
                    { name: 'aug_com', data: 'aug_com', width: '30px', searchable: false },
                    { name: 'aug_otl', data: 'aug_otl', width: '10px', searchable: false },
                    { name: 'sep_com', data: 'sep_com', width: '30px', searchable: false },
                    { name: 'sep_otl', data: 'sep_otl', width: '10px', searchable: false },
                    { name: 'oct_com', data: 'oct_com', width: '30px', searchable: false },
                    { name: 'oct_otl', data: 'oct_otl', width: '10px', searchable: false },
                    { name: 'nov_com', data: 'nov_com', width: '30px', searchable: false },
                    { name: 'nov_otl', data: 'nov_otl', width: '10px', searchable: false },
                    { name: 'dec_com', data: 'dec_com', width: '30px', searchable: false },
                    { name: 'dec_otl', data: 'dec_otl', width: '10px', searchable: false }
                    ],
                columnDefs: [
                    {
                        "targets": [0,2,4,6], "visible": false, "searchable": false
                    }
                    ],
                order: [[2, 'asc']],
                initComplete: function () {
                    var columns = this.api().init().columns;
                    this.api().columns().every(function () {
                        var column = this;
                        // this will get us the index of the column
                        index = column[0][0];
                        //console.log(columns[index].searchable);

                        // Now we need to skip the column if it is not searchable and we return true, meaning we go to next iteration
                        if (columns[index].searchable == false) {
                          return true;
                        }
                        else {
                          var input = document.createElement("input");
                          $(input).appendTo($(column.footer()).empty())
                          .on('keyup change', function () {
                              column.search($(this).val(), false, false, true).draw();
                          });
                        }
                    });
                }
            });

Answer 1

是的，在这一点上，文档有点模糊。 ScrollXInner（即sScrollXInner）是不再支持的遗留＆lt; 1.10.x选项。在1.10.x中，您必须：

将表格包装成具有固定宽度的元素

<div style="width: 500px;">
  <table id="example"></table>
</div>

<强> http://jsfiddle.net/Lyje8wat/

或（不太漂亮）设置.dataTables_wrapper元素的宽度：

div.dataTables_wrapper {
  width: 500px;
}

<强> http://jsfiddle.net/s7hdqw29/

在这两种情况下，您都需要设置scrollX：

var table = $('#example').dataTable({
  scrollX: true,
  ...
})

有很多列的数据表如何强制滚动

1 个答案: