Question

我添加了https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/sc-1.4.2/se-1.2.0/datatables.min.js 在我的html页面中，对于滚动功能，如果我添加更多列，它会重叠窗口页面的其他内容或只是表体移动而不移动头。正如其他帖子中提到的，我没有包含FixedHeader html / js / css文件我无法在收到时添加测试页面来自Web服务的数据，所以这是我的代码。注意：我在标题
中添加了 Yadcf列过滤器

<html> <head> <h2 style="color:#2196F3;">Ticket Data</h2> </head> <body> <div class="container"> <div class="row"> </div> <div class="row"> <div class="col-md-4 col-md-offset-3"> <form action="" class="search-form"> <div class="form-group has-feedback"> <label for="search" class="sr-only">Search</label> <input type="text" class="form-control" name="search" id="search" placeholder="search" autocomplete="off"/> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div> </form> </div> </div> </div>

<script> $(document).ready(function() { var realPath =$("#root").val(); var webServicePathm = realPath+"/mt/saasreporting/getopenticketsdata?"; //var project = projectname.innerText; var parmUrl = "project=test project"; var webCallUrl = webServicePathm+parmUrl; var Table= $('#ex1').DataTable( { rowReorder: true, colReorder: true, /* fixedHeader: { header: true, }, */ "ajax": { "url":webCallUrl, "dataSrc": function ( json ) { for ( var i=0, ien=json.length ; i<ien ; i++ ) { json[i][0] = '<a href="/message/'+json[i][0]+'>View message</a>'; } return json; } }, "columns": [ { "data": "client", "name": "client", "title": "client" }, { "data": "project", "name": "project", "title": "project" }, { "data": "raisedOn", "name": "raisedOn", "title": "raisedOn" }, { "data": "ticketId", "name": "ticketId", "title": "ticketId" }, { "data": "assignedTo", "name": "assignedTo", "title": "assignedTo" }, { "data": "priority", "name": "priority", "title": "priority" } ], "pagingType":"full_numbers", select: true, "sDom": 'B<"clear">Wfrtip', lengthMenu: [ [ 10, 12, 50, -1 ], [ '10 rows', '12 rows', '50 rows', 'Show all' ], ], "buttons": [ { className: 'b2', extend:'pageLength', autoClose: true, /* text: '<i class="fa fa-list-ol-3x" aria-hidden="true" style="color:#81ad30"></i>', */ titleAttr: 'no.of rows' }, { className: 'b2', extend: 'colvis', autoClose: true, /* text: '<i class="fa fa-columns-3x" aria-hidden="true" style="color:#81ad30"></i>', */ titleAttr: 'Column Visibility', exportOptions: { columns: ':visible', } } ], deferRender: true, scrollY: true, scrollCollapse: true, "scrollX": true }); new $.fn.dataTable.Buttons( Table, { buttons: [ { className: 'b1', extend: 'copyHtml5', /* text: '<i class="fa fa-files-o" style="color:green"></i>', */ titleAttr: 'Copy', exportOptions: { modifier: { page: 'current' } } },{ className: 'b1', extend: 'excelHtml5', /* text: '<i class="fa fa-file-excel-o" style="color:green"></i>', */ titleAttr: 'Excel', exportOptions: { columns: ':visible', modifier: { page: 'current' } } },{ className: 'b1', extend: 'csvHtml5', /* text: '<i class="fa fa-file-word-o" style="color:green"></i>', */ titleAttr: 'CSV', exportOptions: { columns: ':visible', modifier: { page: 'current' } } }, { className: 'b1', extend: 'pdfHtml5', message:'Tickets Status', /* text: '<i class="fa fa-file-pdf-o" style="color:red"></i>', */ titleAttr: 'PDF', footer: true, exportOptions: { columns: ':visible', modifier: { page: 'current' } } }, { className: 'b1', extend: 'print', /* text: '<i class="fa fa-print" aria-hidden="true" style="color:blue"></i>', */ titleAttr: 'Print', footer: true, autoPrint: true, exportOptions: { columns: ':visible', modifier: { page: 'current' } } } ] } ); Table.buttons( 1, null ).container().appendTo( Table.table().container() ); yadcf.init(Table, [ { column_number : 0, filter_type: "multi_select", select_type: 'select2', column_data_type: "text", html_data_type: "text", filter_default_label: "clients" }, { column_number : 1, filter_type: "multi_select", select_type: 'select2', column_data_type: "text", html_data_type: "text", filter_default_label: "projects" }, { column_number : 2, filter_type: "multi_select", select_type: 'select2', column_data_type: "text", html_data_type: "text", filter_default_label: "raisedOn" }, { column_number : 3, filter_type: "multi_select", select_type: 'select2', column_data_Type: "text", html_data_type: "text", filter_default_label: "ticketId" }, { column_number : 4, filter_type: "multi_select", select_type: 'select2', column_data_type: "text", html_data_type: "text", filter_default_label: "assignedTo" } , { column_number : 5, filter_type: "multi_select", select_type: 'select2', column_data_type: "text", html_data_type: "text", filter_default_label: "tag" } ]); $('#search').on( 'click', function () { Table.search( this.value ).draw(); } ); function setTableBody() { $(".table.dataTable").height( $(".inner-container").height() - $(".table-header").height()); } $(document).ready(function () { setTableBody(); $(window).resize(setTableBody); $(".table-body").scroll(function () { $(".table-header").offset({ left: 160 - this.scrollLeft }); }); }); }); </script> </body> </html>

标题不是垂直滚动数据表的表体

0 个答案: