datatable new added row disappears after row-reorder

Question

I have created a datatable where you can add rows if you press the "plus" button. An ajax request will post the id of the row where the button was pressed to a URL. The problem is if I reorder the rows the new added row disappears. I found some tips to do it with json and datable.draw() but I don't know how to do it. Can someone help?

$(document).ready(function() {            
  var oTable = $('#tabelle_benutzerHead').DataTable({
   responsive: true,
   "bFilter": false,
   "info": false,
   "scrollCollapse": true,
   "paging": false,
   rowReorder: true
  }); 
  
  oTable.on( 'row-reorder', function ( e, diff, edit ) {
   
   var draggedRow = diff[(diff.length - 1)].node;
   var draggedRowId = $(draggedRow).attr('id'); <!-- dragged and dropped Row -->
   var PreviousRow = diff[(diff.length - 2)].node;
   var PreviousRowId = $(PreviousRow).attr('id'); <!-- the row before the dragged and dropped -->

   $.ajax({
   type: "POST",
   url: "myurl.com",
   data: { 
    draggedRowId,
    PreviousRowId    
    }
  });
  });
 });
 
 var Uhrzeit;
 var SpNr;
 var Platz; 
 var Heimmannschaft;
 var Gastmannschaft;

 var tableRowAppend = '<tr><td>' + Uhrzeit + '</td><td>' + SpNr + '</td><td>' + Platz + '</td><td>'+ Heimmannschaft + '</td><td>'+ Gastmannschaft + 
  '</td><td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td></tr>'; 

 $('#tabelle_benutzerHead').delegate('button.AddDaten', 'click', function() {
  var row = $(this).closest('tr'); // get the parent row of the clicked button
  $(tableRowAppend).insertAfter(row); // insert content

  var rowId = $(row).attr('id'); // clicked RowId
     
   $.ajax({
    type: "POST",
    url: "myurl.com",
    data: { 
     rowId
    }  
   });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="table display" id="tabelle_benutzerHead" cellspacing="0" width="100%">
      <thead data-spy="affix" data-offset-top="100">
       <tr>
        <th>Uhrzeit</th>
        <th>SpNr</th>
        <th>Platz</th>
        <th>Heimmannschaft</th>
        <th>Gastmannschaft</th>
        <th>Freispiele</th>
       </tr>
      </thead>
      <tbody>
        <tr id="Row1">
         <td>08:00</td>
         <td>134</td>
         <td>Platz 1</td>
         <td>Team 5</td>
         <td>Team 3</td>
         <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
        </tr>
        <tr id="Row2">
         <td>09:00</td>
         <td>76</td>
         <td>Platz 3</td>
         <td>Team 7</td>
         <td>Team 1</td>
         <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
        </tr>
        <tr id="Row3">
         <td>17:30</td>
         <td>45</td>
         <td>Platz 11</td>
         <td>Team 2</td>
         <td>Team 9</td>
         <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
        </tr>
      </tbody>
     </table>

score 0 · Answer 1 · answered Dec 08 '16 at 12:56

0

You need to add the row using the DataTables api, so it knows about it. Do not use JQuery alone.

Refer to https://datatables.net/reference/api/row.add()

answered Dec 08 '16 at 12:56

psx

4,040
6
30
59

But how can i add the new row after the row where the button was clicked with datatable.row.add().draw()? – Arthur Schwarz Dec 08 '16 at 13:08
Have a look at this question: http://stackoverflow.com/questions/30712227/datatables-row-add-to-specific-index – psx Dec 09 '16 at 10:41
Then the row-reorder doesn't work. I need to do deliver the rowId from the clicked button to a json and get the new row from it so that the datatable is updated. – Arthur Schwarz Dec 09 '16 at 13:24

datatable new added row disappears after row-reorder

1 Answers1