Заголовок JQuery Datatable не выровнен по телу? - PullRequest
Новая
       10

Заголовок JQuery Datatable не выровнен по телу?

0 голосов
/ 05 ноября 2018

У меня есть набор данных, которые должны отображаться в 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>

1 Ответ

0 голосов
/ 05 ноября 2018

Добавление функции drawCallback в параметрах dataTable 

 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,
    drawCallback: function( settings ) {
      // Reset margin to 0 after datatable render
      var ele = document.querySelector('.dataTables_scrollBody'); 
      if(ele){
         ele = ele.querySelector('.dataTable');
         if(ele){
            ele.style.margin = 0; 
         }
     }
   },
    language: {
      "emptyTable": "No records were found."
    }
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...