Question

我有一组数据应该显示在JQuery Datatables中，并带有过滤和滚动选项，而不会丢失列标题。到目前为止，所有功能都可以使用，但是列标题存在问题。如果单击链接并检查运行示例，您将看到问题。当tbody居中时，列标题位于左侧。我尝试解决此问题并更改HTML代码，删除了一些JQuery表属性，但仍然没有成功。如果有人知道如何解决此问题，或者我的代码有任何问题，请告诉我。这是示例：

$('#btnGet').on('click', function() {
  buildTable();
});

var dataTable;

function GenerateTable(tblID) {
  // Setup - add a text input to each footer cell
  $('#rptTbl thead tr').clone(true).appendTo('#rptTbl thead');
  $('#rptTbl thead tr:eq(1) th').each(function(i) {
    //var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search" />');

    $('input', this).on('keyup change', function() {
      if (dataTable.column(i).search() !== this.value) {
        dataTable.column(i).search(this.value).draw();
      }
    });
  });

  dataTable = $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'print',
      {
        extend: 'pdfHtml5',
        orientation: 'landscape',
        pageSize: 'LEGAL'
      }
    ],
    orderCellsTop: true,
    fixedHeader: {
      header: true,
      footer: true
    },
    scrollX: true,
    scrollY: "400px",
    scrollCollapse: true,
    iDisplayLength: 25,
    language: {
      "emptyTable": "No records were found."
    }
  });
}

function buildTable() {
  var htmlTbl = '<table id="rptTbl" class="table table-bordered"><thead><tr><th>Area</th></tr></thead><tbody><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr></tbody></table>';
  $('#rptData').empty().append(htmlTbl);
  GenerateTable('rptTbl');
}

<!DOCTYPE html>
<html>

  <head>
      <title>Test JQuery Datatables</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- *** Start: CSS for DataTables. *** -->
	    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
      <!-- *** End: CSS for DataTables. *** -->
      <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- *** Start: JS for DataTables. *** -->
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
    <!-- *** End: JS for DataTables. *** -->
  </head>

  <body>
      <div class="container">
        <div id="report_filters" class="collapse in">
          <div class="row">
            <div class="form-group col-xs-10 col-sm-5 col-md-3 col-lg-3">
              <button type="button" id="btnGet" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#report_data,#report_filters">Get Report</button>
            </div>
          </div>
        </div>

        <div id="report_data" class="collapse">
          <div class="row">
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#report_data,#report_filters">
	                            <span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
	                        </button>
            </div>
          </div>
       <div id="rptData" class="table-responsive"></div>
      </div>
    </div>
  </body>

</html>

Answer 1

在dataTable选项中添加drawCallback函数

false

jQuery Datatable标头不与tbody对齐？

1 个答案: