1

I found out how to delete a row with this jQuery code. While clicking on a td with the class delete and a garbage icon.

HTML

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>

JAVASCRIPT

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );

But I did not find anything about duplicating rows. I just want to click on a td with another icon in it and the row is duplicated below.

Improve this question
6
  • what do you want to remove exactly? Commented Mar 18, 2016 at 14:00
  • Hi, i dont want to remove anything. I already can remove rows. I want to DUPLICATE rows when i click on a, for example <td> field. Commented Mar 18, 2016 at 14:04
  • Do you want to delete a row or duplicate a row? Commented Mar 18, 2016 at 14:04
  • something like this should work $('#foo tbody').on( 'click', 'tr .duplicate', function () { $(this).closest('tr').fadeIn("slow", function(){ $(this).clone().appendTo($( this) ) }) } ); Commented Mar 18, 2016 at 14:08
  • @twernt, i want to duplicate a row.. delete is already working :) Commented Mar 18, 2016 at 14:11

3 Answers 3

Reset to default
4

To duplicate a row, you'll need to copy all of its data into an array, then call row.add() to insert this data as a new row.

Something like:

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td class="copy">IMAGE src here</td>
      <td><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>

$('#foo tbody').on( 'click', 'tr .copy', function () {
  var row_data = [];
  $(this).closest('tr').find('td').each(function() {
    row_data.push($(this).text());
  });
  // you'll need a reference to your DataTable here
  table.row.add(row_data).draw();
});

To get a reference to your DataTable, assign the result of the DataTable() method to a var.

$(document).ready(function() { 
  var table = $('#foo).DataTable( { "paging": false, "info": false }); 
  // set up your event handlers, etc. 
});

If you append a row with jQuery instead of DataTables method like row.add(), you'll lose the row when you sort or page the table.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Like this ? $('#bega-data-tables tbody').on( 'click', 'tr .copy', function () { var row_data = []; $(this).closest('tr').find('td').each(function() { row_data.push($(this).text()); }); // you'll need a reference to your DataTable here var table = $('#bega-data-tables').DataTable(); table.row.add(row_data).draw(); });
If you initialize your DataTable like this: var table = $('#example').DataTable(); then table will be reference to your DataTable object you can use to call DataTable methods. The API docs are pretty comprehensive and do a good job of explaining this I think.
Ok, my english is not the best , so i will try to figure it out :P thanks anyway mate !
where i have to put the var table = $('#example').DataTable(); ? i already have initlialized the plugin with $(document).ready(function() { $('#foo).DataTable( { "paging": false, "info": false }); });
@151RUM I updated the answer to include an example of initializing the plugin and setting the DataTable object to a var. Does this make sense?
|
0

Here's the jQuery that adds a row duplicate right underneath it, where DataTables is concerned. It has a caveat that this method may not retain any sorting or filtering set by the user.

$('#formtable tbody').on( 'click', 'button.btn-success', function () {
    //destroy instance of DataTables    
    table.destroy(false);

    //script assumes button is clicked on the line that needs to be duplicated
    var btn = this;

    //copy and insert row right below the original
    var line = $(btn).parents('tr');
    line.after(line.clone());

    //since clone retains only input field values, but not dropdown selections,
    //each dropdown value must be assigned individually
    line.next().find("select.shape").val(line.find("select.shape").val());
    line.next().find("select.material").val(line.find("select.material").val());
    line.next().find("select.supplied").val(line.find("select.supplied").val());

    //re-creating DataTables instance 
    //notice that "table" has no "var" in front - that's because it is pre-defined.
    table = $('#formtable').DataTable({
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": "_all"
        } ],
        "paging":   false,
        "info": false,
        "ordering": true,
        "searching": false,
        "rowReorder": true
    }); 
    //"Index Column" values re-calculation
    table.column(0).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    });

});

Hope this helps.

Improve this answer

Comments

-1

Try this:

HTML

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td class="duplicate"><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>
</table>

SCRIPT

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );

$('#foo tbody').on( 'click', 'tr .duplicate', function () {
        var myTr = $(this).closest('tr');
        var clone = myTr.clone();
        myTr.after(clone);
    } );
Improve this answer

2 Comments

naaa this will just be a UI change, if you filter or paginate the new row will no longer be there
Hmm unfortunately this is the only solution who works right now... but as you said Reddy, we need to filter results later on, so maybe this wont work in the end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.