将滚动条添加到数据库表中会破坏表

时间：2019-04-10 13:28:01

标签： javascript jquery html datatables scroller

我想将滚动扩展名添加到我的数据表中。但是，当我尝试执行此操作时，我的整个表都被搞砸了。。我猜这是我的JavaScript代码最后几行中的解决方法的原因。

但这是一个必要的解决方法，以便将表中的标题和子行加倍。因此，我无法将其删除。你们看到在此表上实现滚动条的任何方式了吗？

这是我的工作表：

var table;
var groupColumn = 1;

$(document).ready(function() {
  table = $('#contact_overview_table').DataTable( {
    "displayStart": 0,
    "columnDefs": [
      {
        "visible": false,
        "targets": groupColumn
      }
    ],
    "order": [[ groupColumn, 'asc' ]],
    "responsive": {
      "details": {
        "type": 'column',
        "target": 'tr',
        "renderer": function ( api, rowIdx, columns ) {
          var data = $.map( columns, function ( col, i ) {
            return col.hidden ?
              '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
              '<td>'+col.title+':'+'</td> '+
              '<td>'+col.data+'</td>'+
              '</tr>' :
            '';
          } ).join('');

          return data ?
            $('<table/>').append( data ) :
          false;
        }
      }
    },
    "processing": true,
    "ajax": "http://demo3772827.mockable.io/getData",
    "drawCallback": function ( settings ) {
      var api = this.api();
      var rows = api.rows( {page:'current'} ).nodes();
      var last=null;

      api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
        if ( last !== group ) {
          $(rows).eq( i ).before(
            '<tr class="group"><td colspan="15" style="font-weight: bold;">'+group+'</td></tr>'
          );

          last = group;
        }
      } );
    },
    initComplete: function () {
      this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>');
        select.appendTo( $(column.header()).empty() )

        select.on( 'click', function(e) {
          e.stopPropagation();
        } );


        select.on( 'change', function () {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
            .search( val ? '^'+val+'$' : '', true, false )
            .draw();
        } );

        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' )
        } );

        $("#autofocus_on_load > select").focus();
        $('th').removeAttr("tabindex");
      } );
    },
  });

  table.on('draw', function () {
    table.columns().indexes().each( function ( idx ) {
      var select = $(table.column( idx ).header()).find('select');

      if ( select.val() === '' ) {
        select
          .empty()
          .append('<option value=""/>');

        table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      }
    } );
  } );

  // Order by the grouping
  $('#contact_overview_table tbody').on( 'click', 'tr.group', function () {
    var currentOrder = table.order()[0];
    if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
      table.order( [ groupColumn, 'desc' ] ).draw();
    }
    else {
      table.order( [ groupColumn, 'asc' ] ).draw();
    }
  } );

  $table = $("#contact_overview_table");
  // workaround for https://github.com/DataTables/Responsive/issues/71
  $table.on('responsive-resize.dt', function(e, datatable, columns) {
    for (var i in columns) {
      var index = parseInt(i, 10) + 1;
      $table.find('th:nth-child(' + index + ')').toggle(columns[i]);
    }
  });
} );
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

<link href="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-bordered display nowrap" id="contact_overview_table" style="width:100%">
  <thead>
    <tr>
      <th class="text-center" id="autofocus_on_load">Buha Nr.</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center table-hide-select">Actions</th>
    </tr>
    <tr>
      <th class="text-center">Buha Nr.</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  </table>
</body>
</html>

如果我添加滚动条，如此处所述：https://datatables.net/extensions/scroller/examples/initialisation/simple.html

我最终得到了这张桌子：

var table;
var groupColumn = 1;

$(document).ready(function() {
  table = $('#contact_overview_table').DataTable( {
    "displayStart": 0,
    "columnDefs": [
      {
        "visible": false,
        "targets": groupColumn
      }
    ],
    "order": [[ groupColumn, 'asc' ]],
    "deferRender": true,
    "scrollY": 200,
    "scrollCollapse": true,
    "scroller": true,
    "responsive": {
      "details": {
        "type": 'column',
        "target": 'tr',
        "renderer": function ( api, rowIdx, columns ) {
          var data = $.map( columns, function ( col, i ) {
            return col.hidden ?
              '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
              '<td>'+col.title+':'+'</td> '+
              '<td>'+col.data+'</td>'+
              '</tr>' :
            '';
          } ).join('');

          return data ?
            $('<table/>').append( data ) :
          false;
        }
      }
    },
    "processing": true,
    "ajax": "http://demo3772827.mockable.io/getData",
    "drawCallback": function ( settings ) {
      var api = this.api();
      var rows = api.rows( {page:'current'} ).nodes();
      var last=null;

      api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
        if ( last !== group ) {
          $(rows).eq( i ).before(
            '<tr class="group"><td colspan="15" style="font-weight: bold;">'+group+'</td></tr>'
          );

          last = group;
        }
      } );
    },
    initComplete: function () {
      this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>');
        select.appendTo( $(column.header()).empty() )

        select.on( 'click', function(e) {
          e.stopPropagation();
        } );


        select.on( 'change', function () {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
            .search( val ? '^'+val+'$' : '', true, false )
            .draw();
        } );

        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' )
        } );

        $("#autofocus_on_load > select").focus();
        $('th').removeAttr("tabindex");
      } );
    },
  });

  table.on('draw', function () {
    table.columns().indexes().each( function ( idx ) {
      var select = $(table.column( idx ).header()).find('select');

      if ( select.val() === '' ) {
        select
          .empty()
          .append('<option value=""/>');

        table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      }
    } );
  } );

  // Order by the grouping
  $('#contact_overview_table tbody').on( 'click', 'tr.group', function () {
    var currentOrder = table.order()[0];
    if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
      table.order( [ groupColumn, 'desc' ] ).draw();
    }
    else {
      table.order( [ groupColumn, 'asc' ] ).draw();
    }
  } );

  $table = $("#contact_overview_table");
  // workaround for https://github.com/DataTables/Responsive/issues/71
  $table.on('responsive-resize.dt', function(e, datatable, columns) {
    for (var i in columns) {
      var index = parseInt(i, 10) + 1;
      $table.find('th:nth-child(' + index + ')').toggle(columns[i]);
    }
  });
} );
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.min.js"></script>

<link href="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.dataTables.min.css" />

<table class="table table-striped table-bordered display nowrap" id="contact_overview_table" style="width:100%">
  <thead>
    <tr>
      <th class="text-center" id="autofocus_on_load">Buha Nr.</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center table-hide-select">Actions</th>
    </tr>
    <tr>
      <th class="text-center">Buha Nr.</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  </table>
</body>
</html>

我将不胜感激！ 问候

0 个答案:

没有答案
相关问题
最新问题