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

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.