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

Question

我创建了一个数据表，如果您按下“加号”按钮，您可以在其中添加行。 ajax 请求会将按下按钮的行的 id 发布到 URL。问题是如果我对行重新排序，新添加的行就会消失。我发现了一些使用 json 和 datable.draw() 的技巧，但我不知道该怎么做。有人可以帮忙吗？

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

您需要使用 DataTables api 添加行，以便它知道。不要单独使用 JQuery。

参考https://datatables.net/reference/api/row.add()