javascript - 数据表无法重新初始化数据表

Question

我正在尝试将选择添加到表格底部以获得更深入的过滤功能，但我添加了以下代码，现在我收到了数据表无法重新初始化错误。

代码来源:https://datatables.net/examples/api/multi_filter_select.html

这是添加的代码:

$(document).ready(function() {
     $('#price-increase-table').DataTable( {
           initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).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>' )
                } );
            } );
        }
    } );
} );

这是我的 script.js 文件中的代码:

$(document).ready(function() {
    var table = $('#price-increase-table').DataTable( {
        //"scrollY": "500px",
        "paging": true,
        dom: 'Bfrtip',
        // Configure the drop down options.
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        // Add to buttons the pageLength option.
        buttons: [
            'pageLength','excel','print'
        ]
    });

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    });

    $("#price-increase-table").width("100%");
});

是否需要将其合并到一个函数中？如果是这样，我怎么会一直遇到错误。

编辑:

表格的 HTML:

<table id="price-increase-table" class="display table table-striped table-bordered dt-responsive">
<thead>
    <tr>
        <th>SKU</th>
        <th>Item Name</th>
        <th>Supplier</th>
        <th>Current Net</th>
        <th>Current Matrix</th>
        <th>Current Band A</th>
        <th>Customer Increase</th>
        <th>New Invoice</th>
        <th>New Net</th>
        <th>New Matrix</th>
        <th>New Band A</th>
        <th>Increased Date</th>
    </tr>
</thead>
<tbody>
<?php while($res = sqlsrv_fetch_array($def, SQLSRV_FETCH_ASSOC)) : ?>
    <tr>
        <td class="price-end"><?php echo $res['ItemCode'];?>
            <input type="hidden" name="curItemCode[]" value="<?php echo $res['ItemCode']; ?>" />
        </td>

        <td><?php echo $res['ItemName'];?></td>
        <td><?php echo $res['BrandOwner'];?></td>
        <td><?php echo $res['CurrentNet'];?></td>
        <td><?php echo $res['CurrentMX'];?></td>
        <td><?php echo $res['CurrentBandA'];?></td>
        <td>
            <input type="text" name="CustomerIncrease[]" class="form-control" value="<?php if(!empty($res['CustomerIncrease'])){echo $res['CustomerIncrease'];}?>" />
        </td>
         <td>
            <input type="text" name="NewInvoice[]" class="form-control" value="<?php if(!empty($res['NewInvoice'])){echo $res['NewInvoice'];}?>" />
        </td>
        <td>
            <input type="text" name="NewNet[]" class="form-control" value="<?php if(!empty($res['NewNet'])){echo $res['NewNet'];}?>" />
        </td>
        <td>
            <input type="text" name="NewMX[]" class="form-control" value="<?php if(!empty($res['NewMX'])){echo $res['NewMX'];}?>" />
        </td>
        <td>
            <input type="text" name="NewBandA[]" class="form-control" value="<?php if(!empty($res['NewBandA'])){echo $res['NewBandA'];}?>" />
        </td>
        <td>
            <input type="text" name="IncreaseDate[]" class="form-control col-md-7 col-xs-12" value="<?php if(!empty($res['IncreaseDate'])){echo $res['IncreaseDate'];}?>" />
        </td>
    </tr>
<?php endwhile; ?>
</tbody> 

Answer 1

您需要在 html 中添加 并且需要合并脚本，否则您将遇到重新初始化数据表问题。

$(document).ready(function() {
    var table = $('#price-increase-table').DataTable( {
        
      initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).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>' )
                } );
            } );
        },
        "paging": true,
        dom: 'Bfrtip',
        // Configure the drop down options.
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        // Add to buttons the pageLength option.
        buttons: [
            'pageLength','excel','print'
        ]
    });

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    });

    $("#price-increase-table").width("100%");
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<table id="price-increase-table" class="display" cellspacing="0" width="100%">
      <thead>
    <tr>
        <th>SKU</th>
        <th>Item Name</th>
        <th>Supplier</th>
        <th>Current Net</th>
        <th>Current Matrix</th>
        <th>Current Band A</th>
        <th>Customer Increase</th>
        <th>New Invoice</th>
        <th>New Net</th>
        <th>New Matrix</th>
        <th>New Band A</th>
        <th>Increased Date</th>
    </tr>
</thead>
    <tfoot>
    <tr>
        <th>SKU</th>
        <th>Item Name</th>
        <th>Supplier</th>
        <th>Current Net</th>
        <th>Current Matrix</th>
        <th>Current Band A</th>
        <th>Customer Increase</th>
        <th>New Invoice</th>
        <th>New Net</th>
        <th>New Matrix</th>
        <th>New Band A</th>
        <th>Increased Date</th>
    </tr>
</tfoot>
        <tbody>
            <tr>
                <td>123</td>
                <td>System</td>
                <td>ABC</td>
                <td>61</td>
                <td>2011</td>
                <td>D</td>
                <td>2</td>
                <td>yes</td>
                <td>67</td>
                <td>K</td>
                <td>L</td>
                <td>2016/12/19</td>
            </tr>
          <tr>
                <td>124</td>
                <td>System</td>
                <td>ABC</td>
                <td>61</td>
                <td>2011</td>
                <td>D</td>
                <td>2</td>
                <td>yes</td>
                <td>67</td>
                <td>K</td>
                <td>L</td>
                <td>2016/12/19</td>
            </tr>
          <tr>
                <td>125</td>
                <td>System</td>
                <td>ABC</td>
                <td>61</td>
                <td>2011</td>
                <td>D</td>
                <td>2</td>
                <td>yes</td>
                <td>67</td>
                <td>K</td>
                <td>L</td>
                <td>2016/12/19</td>
            </tr>
            
        </tbody>
    </table>