Issue with creating and destroying a single table with different data sets

sherkin735

At the moment I have a single table on a web page which I am populating with data retrieved via an ajax call. My idea is that I would like to be able to toggle between two different table layouts and data sets (i.e. I would like to be able to edit 'Tag' records from the database and also 'user' records. I am able to switch between tables and populate them with data at the moment. My issue is this. Whichever table is created first, the inline editing works fine. If I switch to the other table the inline editing breaks with the 'Uncaught Unable to automatically determine field from source.' error. When I switch back to the initial table the error remains. Clearly I am doing something wrong here but I can't for the life of me figure it out. Any advice/assistance you could provide would be hugely appreciated!

These are the two methods I use to create my table objects and their associated editor objects:

'''
function make_user_table() {

var editor = new $.fn.dataTable.Editor({
    ajax: '/admin_user_table',
    table: '#example',
    idSrc: 'id',
    fields: [
        { label: 'Password Attempts', name: 'password_try_count'},
        { label: 'Username', name: 'username'  },
        { label: 'Name', name: 'name'  },
        { label: 'Access Level', name: 'access_level'  },
        { label: 'Password', name: 'password', type: 'password'  }
    ]
});

var user_table = $('#example').DataTable({
    ajax: '/admin_user_table',
    destroy: true,
    dom: 'Bfrtip',
    columns: [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },
        { data: 'password_try_count'},
        { data: 'username' },
        { data: 'name' },
        { data: 'access_level' },
        { data: 'password' }
    ],
    columnDefs: [
        {'title': 'Password Attempts', 'targets': 1},
        {'title': 'Username', 'targets': 2},
        {'title': 'Name', 'targets': 3},
        {'title': 'Access Level', 'targets': 4},
        {'title': 'Password', 'targets': 5}
    ],
    select: {
        style: 'os',
        selector: 'td:first-child'
    },
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit', editor: editor },
        { extend: 'remove', editor: editor }
    ]
});

user_table.buttons().container()
    .insertBefore('#example_filter');

// Activate an inline edit on click of a table cell
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this);
});

return user_table;

}

function make_tag_table(){

var tag_editor = new $.fn.dataTable.Editor( {
ajax:  '/admin_tag_table',
table: '#example',
idSrc:  'id',
fields: [
    { label: 'TagID', name: 'id' },
    { label: 'Text', name: 'text'}
    ]
} );

var tag_table = $('#example').DataTable( {
ajax: '/admin_tag_table',
destroy: true,
dom: 'Bfrtip',
columns: [
                {
        data: null,
        defaultContent: '',
        className: 'select-checkbox',
        orderable: false
    },
    { data: 'id'},
    { data: 'text'}
    ],
columnDefs: [
    {'title':'TagID', 'targets': 1},
    {'title':'Text', 'targets': 2}
    ],
select: {
        style:    'os',
        selector: 'td:first-child'
    },
buttons: [
    { extend: 'create', editor: tag_editor },
    { extend: 'edit',   editor: tag_editor },
    { extend: 'remove', editor: tag_editor }
]
} );

tag_table.buttons().container()
    .insertBefore( '#example_filter' );

// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
    tag_editor.inline( this );
} );

 return tag_table;

}

'''

Then on my html page the datatable objects are destroyed and new ones created via the following method calls:

'''

//This line runs when the page loads to populate the table initially var mytable = make_tag_table(); function destroyUserTable(){ mytable.destroy(); $('#example').empty(); mytable = make_tag_table(); } function destroyTagTable(){ mytable.destroy(); $('#example').empty(); mytable = make_user_table(); }