DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Add multiple rows from one data table to another using jQuery.

Add multiple rows from one data table to another using jQuery.

Satish_LakhaniSatish_Lakhani Posts: 4Questions: 1Answers: 0
in Free community support

Hey,
I'm having to separate data tables on a single page both having same json format with different data in it.

I want to add multiple selected rows from one data table to another.

How can i get this requirement..?

This question has an accepted answers - jump to answer

Answers

  • Satish_LakhaniSatish_Lakhani Posts: 4Questions: 1Answers: 0

    I'm having both the datatables server side &
    fnAddData is not functioning in my case.

    Kindly provide proper solution for this.

  • Mandeepsg3Mandeepsg3 Posts: 7Questions: 1Answers: 2

    I also have a similar requirement .. were you able to solve yours ??

  • Mandeepsg3Mandeepsg3 Posts: 7Questions: 1Answers: 2
    edited June 2014 Answer ✓

    Below is a sample page that I build that simply adds and remove rows between two tables
    Let me know if this helps you too
    <html>
    <head>

    $(document).ready(function() { var oTableSource = $('#source').DataTable(); var oTableDest = $('#destination').DataTable(); $('#source tbody').on( 'click', 'tr', function () { if ( $(this).hasClass('row_selected') ) { $(this).removeClass('row_selected'); } else { oTableSource.$('tr.row_selected').removeClass('row_selected'); $(this).addClass('row_selected'); } } ); $('#destination tbody').on( 'click', 'tr', function () { if ( $(this).hasClass('row_selected') ) { $(this).removeClass('row_selected'); } else { oTableDest.$('tr.selected').removeClass('row_selected'); $(this).addClass('row_selected'); } } ); $('#add').click( function() { oTableDest.row.add(oTableSource.row('.row_selected').data()).draw(); oTableSource.row('.row_selected').remove().draw( false ); } ); $('#remove').click( function() { oTableSource.row.add(oTableDest.row('.row_selected').data()).draw(); oTableDest.row('.row_selected').remove().draw( false ); } ); } );

    </head>
    <body>

    Live example

    Rendering engine Rendering engine
    Trident1 Trident1
    Trident2 Trident3
    Trident4 Trident4
    Trident5 Trident5
    Trident6 Trident6
    Trident7 Trident7
    Gecko8 Trident8
    Add>> Removed>>
    Rendering engine Rendering engine

    </body>
    </html>

  • Satish_LakhaniSatish_Lakhani Posts: 4Questions: 1Answers: 0

    Hi,
    Thanks for your valuable response.

    I'll try this.

    But i've changed my mind to do this with some server side scripting using ajax call & redrawing the source table again after success of ajax call.

    Thank You.

  • Mandeepsg3Mandeepsg3 Posts: 7Questions: 1Answers: 2

    I have extended it a bit to get multiple selection and add / remove working below is the updated script :

    $(document).ready(function() {

    /* Init the table */
var oTableSource = $('#source').DataTable({
  bJQueryUI: true,        
 "iDisplayLength" : 5,              
 "bLengthChange": false,
 "aaSorting": [[ 0, "asc" ]],
 sPaginationType: "full_numbers",      
 "oLanguage": 
         {
          "sZeroRecords": "No matching Subject found for this filter",
          "sSearch": "Filter:"
          }

});
var oTableDest = $('#destination').DataTable({
 bJQueryUI: true,         
 "iDisplayLength" : 5,              
 "bLengthChange": false,
 "aaSorting": [[ 0, "asc" ]],
 sPaginationType: "full_numbers",      
 "oLanguage": 
         {
          "sZeroRecords": "No matching Subject found for this filter",
          "sSearch": "Filter:"
          }
});

 $('#source tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('row_selected') ) {
        $(this).removeClass('row_selected');
    }
    else {
       // oTableSource.$('tr.row_selected').removeClass('row_selected');
        $(this).addClass('row_selected');
    }
} );

 $('#destination tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('row_selected') ) {
        $(this).removeClass('row_selected');
    }
    else {
       // oTableDest.$('tr.selected').removeClass('row_selected');
        $(this).addClass('row_selected');
    }
} );


/* Add a click handler for the delete row */
$('#add').click( function() {   
var aTrs = oTableSource.rows('.row_selected').data();   
for ( var i=0 ; i<aTrs.length ; i++ )
{   
oTableDest.row.add(aTrs[i]).draw();
oTableSource.row('.row_selected').remove().draw( false );
}   
});

/* remove a click handler for the delete row */
$('#remove').click( function() {
var aTrs = oTableDest.rows('.row_selected').data(); 
for ( var i=0 ; i<aTrs.length ; i++ )
{   
oTableSource.row.add(aTrs[i]).draw();
oTableDest.row('.row_selected').remove().draw( false );
}      
} );     
} );
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.