行重新排序后，数据表新添加的行消失

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> 

Answer 1

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()