Question

我想要一个带有粘性标头的DataTable，可以在其中进行筛选以选择列。我想将select输入作为粘性标题，所以它需要在第二个标题列上。这就是为什么我修改了DataTables文档中的标准代码的原因。

documentation应该是这样的：

var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

我将其更改为：

var select = $('<select><option value=""></option></select>')
                            .appendTo( $('#contact_overview_table thead tr:eq(1) th').empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

但是，现在选择选项的值是错误的...我该如何解决？

在这里您可以找到我正在寻找解决方案时找到的有效演示。除了选择的输入不是粘性的。 http://live.datatables.net/hepeqiro/55/edit

到目前为止，我的代码：

var table;
var groupColumn = 1;

$(document).ready(function() {

            table = $('#contact_overview_table').DataTable( {
                "displayStart": 0,
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
                },
                "columnDefs": [
                    { "visible": false, "targets": groupColumn }
                ],
                "order": [[ groupColumn, 'asc' ]],
                "processing": true,
                "pageLength": 100,
                orderCellsTop: true,
                fixedHeader: true,
                "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>')
                            .appendTo( $('#contact_overview_table thead tr:eq(1) th').empty() )
                            .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>' )
                        } );
                    } );
                },
            });

            // 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();
                }
            } );
        } );

<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" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
<div id="contact_overview_table_div" class="table-responsive">
  <table class="table table-striped table-bordered" id="contact_overview_table">
    <thead>
      <tr>
        <th class="text-center">ID</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">Firma</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>
      <tr>
        <th class="text-center">ID</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">Firma</th>
        <th class="text-center">Straße</th>
        <th class="text-center">Ort</th>
        <th class="text-center">Mobil</th>
        <th class="text-center tfoot-hide-select">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <th>Customer</th>
        <th></th>
        <th>Porf</th>
        <th>Max</th>
        <th>Müller</th>
        <th></th>
        <th></th>
        <th>Berlin</th>
        <th>+21 431 8912</th>
        <th class="text-center">Actions</th>
      </tr>

      <tr>
        <th>2</th>
        <th>Customer</th>
        <th></th>
        <th></th>
        <th>Tim</th>
        <th>See</th>
        <th></th>
        <th></th>
        <th>Stockholm</th>
        <th>+44 123 5763</th>
        <th class="text-center">Actions</th>
      </tr>

      <tr>
        <th>1</th>
        <th>Supplier</th>
        <th></th>
        <th>Dr</th>
        <th>Philipp</th>
        <th></th>
        <th></th>
        <th></th>
        <th>New York</th>
        <th>+49 241 4513</th>
        <th class="text-center">Actions</th>
      </tr>

      <tr>
        <th>2</th>
        <th>Supplier</th>
        <th></th>
        <th></th>
        <th>Max</th>
        <th>Hue</th>
        <th></th>
        <th></th>
        <th>Los Angelas</th>
        <th>+44 124 1341</th>
        <th class="text-center">Actions</th>
      </tr>
    </tbody>
  </table>
</div>

致以问候，谢谢！

Answer 1

initComplete: function () {
                this.api().columns().every( function (z) {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $('#contact_overview_table thead tr:eq(1) th:eq('+z+')').empty() )
                        .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>')
                    } );
                } );
            },

选择标题和固定的筛选器-错误的选项值

1 个答案: