Javascript 如何将json数据加载到具有可编辑行的DataTable？

男人们需要你的专家建议， 我在使用datatable插件时遵循了这个示例，只是想知道是否可以使用ajax用编辑行的操作填充一个表

到目前为止，我得到的代码是这样的。这段代码成功地为datatable创建了输入元素和保存链接，但我不确定将ajax加载函数放在哪里

(function( $ ) {

'use strict';

var EditableTable = {

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

    initialize: function() {
        this
            .setVars()
            .build()
            .loadData()
            .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,
                null,
                { "bSortable": false }
            ]
        });

        window.dt = this.datatable;
        return this;
    },

    // Trying to load my json data here but getting an error saying
    // DataTables warning: table id=branches-editable - 
    // Cannot reinitialise DataTable. For more information about this error, 
    // please see http://datatables.net/tn/3
    loadData: function() {
        this.datatable = this.$table.DataTable({
            bProcessing: true,
            sAjaxSource: this.$table.data('url')
        });
    },

    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 ]);

（函数（$）{
"严格使用",；
变量可编辑表={
选项：{
addButton:“#addToTable”，
表：“#可编辑的分支”，
对话框：{
包装器：“#对话框”，
取消按钮：“#对话框取消”，
确认按钮：“#对话框确认”，
}
},
初始化：函数（）{
这
.setVars（）
.build（）
.loadData（）
.events（）；
},
setVars:function（）{
this.$table=$（this.options.table）；
this.$addButton=$（this.options.addButton）；
//对话
this.dialog={}；
this.dialog.$wrapper=$（this.options.dialog.wrapper）；
this.dialog.$cancel=$（this.options.dialog.cancel按钮）；
this.dialog.$confirm=$（this.options.dialog.confirButton）；
归还这个；
},
构建：函数（）{
this.datatable=this.$table.datatable({
AO列：[
无效的
无效的
无效的
无效的
{“bSortable”：false}
]
});
window.dt=this.datatable；
归还这个；
},
//正在尝试在此处加载json数据，但出现以下错误
//DataTables警告：表id=可编辑的分支-
//无法重新初始化DataTable。有关此错误的详细信息，
//请看http://datatables.net/tn/3
loadData:function（）{
this.datatable=this.$table.datatable({
b处理：对，
sAjaxSource:this.$table.data（'url'））
});
},
事件：函数（）{
var _self=这个；
这是一张五美元的桌子
.on（'click'，'a.save-row'，函数（e）{
e、 预防默认值（）；
_self.rowSave（$（this.closest（'tr'））；
})
.on（'click'，'a.cancel-row'，函数（e）{
e、 预防默认值（）；
_self.rowCancel（$（this.closest（'tr'））；
})
.on（'click'，'a.edit-row'，函数（e）{
e、 预防默认值（）；
_self.rowEdit（$（this.closest（'tr'））；
})
.on（'click'、'a.remove-row'，函数（e）{
e、 预防默认值（）；
var$row=$（this）.closest（'tr'）；
$.magnificPopup.open({
项目：{
src:_self.options.dialog.wrapper，
键入：“内联”
},
预加载程序：false，
莫代尔：是的，
回调：{
更改：函数（）{
_self.dialog.$confirm.on（'click'，函数（e）{
e、 预防默认值（）；
_self.rowRemove（$row）；
$.magnificPopup.close（）；
});
},
关闭：函数（）{
_self.dialog.$confirm.off（'click'）；
}
}
});
});
此.addButton.on（'click'，函数（e）{
e、 预防默认值（）；
_self.rowAdd（）；
});
此.dialog.$cancel.on（'click'，函数（e）{
e、 预防默认值（）；
$.magnificPopup.close（）；
});
归还这个；
},
// ==========================================================================================
//行函数
// ==========================================================================================
行添加：函数（）{
这个.addButton.attr（{'disabled'：'disabled'}）；
风险价值行动，
数据，
$row；
行动=[
'',
'',
'',
''
].加入（“”）；
data=this.datatable.row.add（[''，''，''，''，actions]）；
$row=this.datatable.row（数据[0]）.nodes（）到$（）；
美元行
.addClass（'adding'）
.find（'td:last'）
.addClass（“操作”）；
这个.rowEdit（$row）；
this.datatable.order（[0，'asc']）.draw（）；//始终显示字段
},
行取消：函数（$row）{
var_self=这个，
$actions，
我
数据；
if（$row.hasClass（'adding'））{
此.rowRemove（$row）；
}否则{
data=this.datatable.row（$row.get（0））.data（）；
this.datatable.row（$row.get（0））.data（data）；
$actions=$row.find（'td.actions'）；
如果（$actions.get（0））{
此.rowSetActionsDefault（$row）；
}
this.datatable.draw（）；
}
},
行编辑：函数（$row）{
var_self=这个，
数据；
data=this.datatable.row（$row.get（0））.data（）；
$row.children（'td'）。每个（函数（i）{
var$this=$（this）；
if（$this.hasClass（'actions'））{
_self.rowSetActionsEditing（$row）；
}否则{
$this.html（“”）；
}
});
},
行保存：函数（$row）{
var_self=这个，
$actions，
值=[]；
if（$row.hasClass（'adding'））{
此.addButton.removeAttr（'disabled'）；
$row.removeClass（'adding'）；
}
values=$row.find（'td'）.map（函数（）{
var$this=$（this）；
如果（$t）
initDataTable:function(){
    var _this=this;
    if(_this.options.trackRowsWithChanges){
        _this.trackRowsWithChanges();
    }
    if(!_this.dataTable) _this.dataTable=$(_this.options.tableId).DataTable(_this.options.dataTableOptions);
    if(_this.options.useLiveDomSort){
        _this.useLiveDomSort();
    }
    return _this.dataTable;
},

redrawTable:function(fromServer,sortOrder){
    var _this=this;
    fromServer ?  _this.dataTable.ajax.reload() : _this.dataTable.rows().invalidate().draw();
    if(sortOrder) _this.dataTable.order([ 0, 'desc' ],[ 1, 'asc' ]).draw()

}