Question

我在我的桌子上使用angular-datatable。我想在屏幕缩小时显示我的表格的水平滚动条。我搜索了文档并找到了.withScroller和withOption('scrollX',100)，虽然它添加了滚动条，但标题下方还有一些奇怪的行。

这是它的形象：

这里有一些代码，如果有用的话： controller.js

angular.module('myapp')
            .controller('DemoController',function($scope,userservice,DTOptionsBuilder,DTColumnBuilder){              
                  $scope.dtOptions=DTOptionsBuilder.fromFnPromise(userservice.getUserTable()
                    .then(function(justdata){
                        return justdata;
                    }))
                    .withDOM("<'row'<'col-md-6'l><'col-md-6'f>r><'row'<'col-sm-12'<'#colvis'B>>>tip")   
                    .withOption('scrollX','true')
                //.withScroller() as given in docs
                //.withOption('deferRender', true)
                //.withOption('scrollX', 'true')
                    .withPaginationType('full_numbers')
                    .withButtons([
                        {
                            extend: "copy",
                            className: "btn btn-dark",
                            text: 'Copy',
                            init: function(api, node, config) {
                                $(node).removeClass('dt-button')
                            }
                        },
                        {
                            extend: "excel",
                            className: "btn btn-dark",
                            text: 'Excel',
                            init: function(api, node, config) {
                                $(node).removeClass('dt-button')
                            }
                        },
                        {
                            extend: "print",
                            className: "btn btn-dark",
                            text: 'Print',
                            init: function(api, node, config) {
                                $(node).removeClass('dt-button')
                            }
                        },
                        {
                            text: 'Custom Button',
                            key: '1',
                            className: "btn btn-dark",
                            action: function (e, dt, node, config) {
                                alert('Button activated');
                            },
                            init: function(api, node, config) {
                                $(node).removeClass('dt-button')
                            }
                        }
                    ]);

                $scope.dtColumns=[
                    DTColumnBuilder.newColumn('id').notVisible(),
                    DTColumnBuilder.newColumn(null).withTitle('#').withClass('myclass').notSortable().renderWith(function(data, type, full, meta){
                        return meta.row+1;
                    }),
                    DTColumnBuilder.newColumn('name').withTitle('Name'),
                    DTColumnBuilder.newColumn('loginid').withTitle('LoginID'),
                    DTColumnBuilder.newColumn('usertype').withTitle('Usertype'),
                    DTColumnBuilder.newColumn('status').withTitle('Status'),
                    DTColumnBuilder.newColumn('createdon').withTitle('Created On'),
                    DTColumnBuilder.newColumn('createdby').withTitle('Created By'),
                    DTColumnBuilder.newColumn('null').withTitle('Action').notSortable().renderWith(function(data,type,full,meta){
                        return '\
                        <button class="btn btn-info btn-xs" ng-click="project.editProject(' + (meta.row+1) + ')">' +
                            '<i class="fa fa-edit"></i>' +
                        '</button>&nbsp;' +
                        '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + (meta.row+1) + ')">' +
                            '<i class="fa fa-trash-o"></i>' +
                        '</button>';
                    })
                    ];

                S=$scope; 
            });

  <br><br>

这是部分模板：

<div class="container-fluid" ng-controller="DemoController">
    <div class="row">
        <div class="col-md-12">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <div class="c-grey-900 mB-20">
                    <h4 class="c-grey-900 mB-20 pull-left">List</h4>
                    <a class="btn btn-dark pull-right" href="users/add">Create Users</a>
                </div>

        <table id="dataTable" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="display nowrap" cellspacing="0" width="100%">      
        </table>
        </div>
      </div>
    </div>
</div>

以下是所有包含的内容：

<link href="scripts/offlinevendor/jquery.dataTables.min.css" rel="stylesheet">
    <link href="scripts/offlinevendor/buttons.dataTables.min.css" rel="stylesheet">
<script src="scripts/offlinevendor/jquery-2.2.4.min.js"></script>
<script src="scripts/vendor/angular/angular.js"></script>
<script src="scripts/offlinevendor/jquery.dataTables.min.js"></script>
    <script src="scripts/offlinevendor/dataTables.buttons.min.js"></script>
    <script src="scripts/offlinevendor/buttons.flash.min.js"></script>
    <script src="scripts/offlinevendor/jszip.min.js"></script>
    <script src="scripts/offlinevendor/pdfmake.min.js"></script>
    <script src="scripts/offlinevendor/vfs_fonts.js"></script>
    <script src="scripts/offlinevendor/buttons.html5.min.js"></script>
    <script src="scripts/offlinevendor/buttons.print.min.js"></script>
    <script src="scripts/offlinevendor/angular-datatables.min.js"></script>
    <script src="scripts/offlinevendor/angular-datatables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
    <script src="scripts/offlinevendor/angular-datatables.scroller.min.js"></script>

我第一次使用angular-datatable。我真的需要那个滚动条。请帮我stackoverflow！

Answer 1

DataTable的scrollX只是一个布尔值，尝试将其更改为true。请参阅此处的参考页：https://datatables.net/reference/option/scrollX。

Answer 2

看起来你正在使用bootstrap并且可以将表包装在具有类表响应的div中。这将为较小的屏幕尺寸/较小的设备生成水平滚动条。

https://getbootstrap.com/docs/4.0/content/tables/#conveying-meaning-to-assistive-technologies

＆＃13;

<div class="table-responsive">
  <table id="dataTable" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="display nowrap" cellspacing="0" width="100%">
  </table>
</div>

＆＃13;

将滚动条添加到Angular Datatable

2 个答案: