将表数据添加到可编辑的 DataTables 会删除过滤器

Posted 2023-05-09

【中文标题】将表数据添加到可编辑的 DataTables 会删除过滤器

【英文标题】：Adding table data to editable DataTables removes filters

【发布时间】：2016-10-02 19:03:41

【问题描述】：

我使用的是可编辑的 DataTable，当我添加超过 4 个表头或表数据时，它会删除表的过滤器（搜索、排序、分页、编辑等）。

此代码有效：

<table class="table table-bordered table-striped mb-none" id="datatable-editable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="gradeU">
      <td></td>
      <td></td>
      <td></td>

      <td class="actions">
        <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
        <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
        <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
        <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
      </td>
    </tr>
  </tbody>
</table>

结果：

这个没有：

<table class="table table-bordered table-striped mb-none" id="datatable-editable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="gradeU">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="actions">
        <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
        <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
        <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
        <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
      </td>
    </tr>
  </tbody>
</table>

结果：

唯一的区别是添加的表头和表数据 有谁知道如何解决这个问题？

更新：

我检查了另一个不可编辑但仍有过滤器的 DataTable，我能够成功添加表头和表数据。

表之间的唯一区别是依赖文件： 不可编辑表的 example.datatables.default.js 和可编辑表的 example.datatables.editable.js

example.datatables.default.js

(function( $ ) 

'use strict';

var datatableInit = function() 

    $('#datatable-default').dataTable();

;

$(function() 
    datatableInit();
);
).apply( this, [ jQuery ]);

example.datatables.editable.js

(function( $ ) 

'use strict';

var EditableTable = 

    options: 
        addButton: '#addToTable',
        table: '#datatable-editable',
        dialog: 
            wrapper: '#dialog',
            cancelButton: '#dialogCancel',
            confirmButton: '#dialogConfirm',
        
    ,

    initialize: function() 
        this
            .setVars()
            .build()
            .events();
    ,

    setVars: function() 
        this.$table             = $( this.options.table );
        this.$addButton         = $( this.options.addButton );

        // dialog
        this.dialog             = ;
        this.dialog.$wrapper    = $( this.options.dialog.wrapper );
        this.dialog.$cancel     = $( this.options.dialog.cancelButton );
        this.dialog.$confirm    = $( this.options.dialog.confirmButton );

        return this;
    ,

    build: function() 
        this.datatable = this.$table.DataTable(
            aoColumns: [
                null,
                null,
                null,
                 "bSortable": false 
            ]
        );

        window.dt = this.datatable;

        return this;
    ,

    events: function() 
        var _self = this;

        this.$table
            .on('click', 'a.save-row', function( e ) 
                e.preventDefault();

                _self.rowSave( $(this).closest( 'tr' ) );
            )
            .on('click', 'a.cancel-row', function( e ) 
                e.preventDefault();

                _self.rowCancel( $(this).closest( 'tr' ) );
            )
            .on('click', 'a.edit-row', function( e ) 
                e.preventDefault();

                _self.rowEdit( $(this).closest( 'tr' ) );
            )
            .on( 'click', 'a.remove-row', function( e ) 
                e.preventDefault();

                var $row = $(this).closest( 'tr' );

                $.magnificPopup.open(
                    items: 
                        src: _self.options.dialog.wrapper,
                        type: 'inline'
                    ,
                    preloader: false,
                    modal: true,
                    callbacks: 
                        change: function() 
                            _self.dialog.$confirm.on( 'click', function( e ) 
                                e.preventDefault();

                                _self.rowRemove( $row );
                                $.magnificPopup.close();
                            );
                        ,
                        close: function() 
                            _self.dialog.$confirm.off( 'click' );
                        
                    
                );
            );

        this.$addButton.on( 'click', function(e) 
            e.preventDefault();

            _self.rowAdd();
        );

        this.dialog.$cancel.on( 'click', function( e ) 
            e.preventDefault();
            $.magnificPopup.close();
        );

        return this;
    ,

    // ==========================================================================================
    // ROW FUNCTIONS
    // ==========================================================================================
    rowAdd: function() 
        this.$addButton.attr( 'disabled': 'disabled' );

        var actions,
            data,
            $row;

        actions = [
            '<a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>',
            '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>',
            '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>',
            '<a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>'
        ].join(' ');

        data = this.datatable.row.add(['', '', '', actions ]);
        $row = this.datatable.row( data[0] ).nodes().to$();

        $row
            .addClass( 'adding' )
            .find( 'td:last' )
            .addClass( 'actions' );

        this.rowEdit( $row );

        this.datatable.order([0,'asc']).draw(); // always show fields
    ,

    rowCancel: function( $row ) 
        var _self = this,
            $actions,
            i,
            data;

        if ( $row.hasClass('adding') ) 
            this.rowRemove( $row );
         else 

            data = this.datatable.row( $row.get(0) ).data();
            this.datatable.row( $row.get(0) ).data( data );

            $actions = $row.find('td.actions');
            if ( $actions.get(0) ) 
                this.rowSetActionsDefault( $row );
            

            this.datatable.draw();
        
    ,

    rowEdit: function( $row ) 
        var _self = this,
            data;

        data = this.datatable.row( $row.get(0) ).data();

        $row.children( 'td' ).each(function( i ) 
            var $this = $( this );

            if ( $this.hasClass('actions') ) 
                _self.rowSetActionsEditing( $row );
             else 
                $this.html( '<input type="text" class="form-control input-block" value="' + data[i] + '"/>' );
            
        );
    ,

    rowSave: function( $row ) 
        var _self     = this,
            $actions,
            values    = [];

        if ( $row.hasClass( 'adding' ) ) 
            this.$addButton.removeAttr( 'disabled' );
            $row.removeClass( 'adding' );
        

        values = $row.find('td').map(function() 
            var $this = $(this);

            if ( $this.hasClass('actions') ) 
                _self.rowSetActionsDefault( $row );
                return _self.datatable.cell( this ).data();
             else 
                return $.trim( $this.find('input').val() );
            
        );

        this.datatable.row( $row.get(0) ).data( values );

        $actions = $row.find('td.actions');
        if ( $actions.get(0) ) 
            this.rowSetActionsDefault( $row );
        

        this.datatable.draw();
    ,

    rowRemove: function( $row ) 
        if ( $row.hasClass('adding') ) 
            this.$addButton.removeAttr( 'disabled' );
        

        this.datatable.row( $row.get(0) ).remove().draw();
    ,

    rowSetActionsEditing: function( $row ) 
        $row.find( '.on-editing' ).removeClass( 'hidden' );
        $row.find( '.on-default' ).addClass( 'hidden' );
    ,

    rowSetActionsDefault: function( $row ) 
        $row.find( '.on-editing' ).addClass( 'hidden' );
        $row.find( '.on-default' ).removeClass( 'hidden' );
    

;

$(function() 
    EditableTable.initialize();
);

).apply( this, [ jQuery ]);

javascript 绝对不是我的强项。

有人可以帮我理解一下吗？

【参考方案1】：

您的代码被硬编码为 4 列。您需要对其进行更改，以便接受任意数量的列。

在example.datatables.editable.js中更改这一行：

this.datatable = this.$table.DataTable(
    aoColumns: [
        null,
        null,
        null,
         "bSortable": false 
    ]
);

到：

this.datatable = this.$table.DataTable(
    columnDefs: [
         targets: -1, orderable: false 
    ]
);

也替换

data = this.datatable.row.add(['', '', '', actions ]);

与

var numCols = this.datatable.columns().nodes().length;
var rowData = [];
for(var i = 0; i < numCols - 1; i++) rowData.push(''); 
rowData.push(actions);
data = this.datatable.row.add(rowData);