Question

I’m building a simple interface for a sql query result.

I’ve choose to use DataTables and with it help I’ve created something like this:

http://live.datatables.net/izavon/18/edit#javascript,html,live

I have problem with moving rows from one table to another, right now I have 2 functions that do their job, but I would like to have one function, because my solution only works in one direction-I can move from one table to another just ones.

$(".deleteMe1").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable1.fnGetData(row);
    oTable2.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable1.fnGetPosition(row);
    oTable1.fnDeleteRow(removeElement, null, true);
});

$(".deleteMe2").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable2.fnGetData(row);
    oTable1.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable2.fnGetPosition(row);
    oTable2.fnDeleteRow(removeElement, null, true);
});

So my questions is:How to merge above functions into one.

Answer 1

As the rows are changing, bind the delete button to a lower unchanging element with .on, in the case below the click event is bound to $(document) and then focused with the second parameter.

$(document).on("click", '.deleteMe', function (event) 
{
    // Get the id of the clicked table for comparison
    var id = $(this).closest('table').attr('id');

    // Assign the tables to the table object
    var table = {
        primary : (id === 'example1') ? oTable1 : oTable2,
        secondary : (id !== 'example1') ? oTable1 : oTable2
    };

    // Instead of calling the tables in seperate functions just use the  dynamically
    // assigned table.primary.x() and table.secondary.x()
    var row = $(this).closest("tr").get(0);

    var addElement = table.primary.fnGetData(row);

    table.secondary.fnAddData(addElement);

    var removeElement = table.secondary.fnGetPosition(row);

    table.primary.fnDeleteRow(removeElement, null, true);

});

Updated Datatables example using above

This will work both ways depending on which table the remove button was clicked in. You can modify this to work in one or both directions easily by hardcoding the primary / secondary table variables or making the .on functions second parameter to a class that is only used in one table.

To run updates on the table, add this line to the bottom of the above function:

oTable1.fnDraw();

This will force the table to re-draw everytime a new line is added or removed, this is useful to you as you can use:

"fnDrawCallback": function() {
    console.log('draw callback executed');
 };

within your datatable object to specify exactly what should happen. Updating the footer, pull relevant ajax data etc.

Hope this helps.