1
「プラス」ボタンを押したときに行を追加できるデータテーブルを作成しました。 ajaxリクエストは、ボタンが押された行のidをURLにポストします。問題は、追加された新しい行が消える行を並べ替える場合です。私はjsonとdatable.draw()でそれを行うためのヒントを見つけましたが、どうやってそれを行うのか分かりません。助けてもらえますか?datatable新しい行が行の並べ替えの後に消えます
$(document).ready(function() { \t \t \t \t \t \t \t
\t \t var oTable = $('#tabelle_benutzerHead').DataTable({
\t \t \t responsive: true,
\t \t \t "bFilter": false,
\t \t \t "info": false,
\t \t \t "scrollCollapse": true,
\t \t \t "paging": false,
\t \t \t rowReorder: true
\t \t }); \t
\t \t
\t \t oTable.on('row-reorder', function (e, diff, edit) {
\t \t \t
\t \t \t var draggedRow = diff[(diff.length - 1)].node;
\t \t \t var draggedRowId = $(draggedRow).attr('id'); \t <!-- dragged and dropped Row -->
\t \t \t var PreviousRow = diff[(diff.length - 2)].node;
\t \t \t var PreviousRowId = $(PreviousRow).attr('id'); \t <!-- the row before the dragged and dropped -->
\t \t \t $.ajax({
\t \t \t type: "POST",
\t \t \t url: "myurl.com",
\t \t \t data: { \t
\t \t \t \t draggedRowId,
\t \t \t \t PreviousRowId \t \t \t \t
\t \t \t \t }
\t \t });
\t \t });
\t });
\t
\t var Uhrzeit;
\t var SpNr;
\t var Platz;
\t var Heimmannschaft;
\t var Gastmannschaft;
\t var tableRowAppend = '<tr><td>' + Uhrzeit + '</td><td>' + SpNr + '</td><td>' + Platz + '</td><td>'+ Heimmannschaft + '</td><td>'+ Gastmannschaft +
\t \t '</td><td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td></tr>'; \t
\t $('#tabelle_benutzerHead').delegate('button.AddDaten', 'click', function() {
\t \t var row = $(this).closest('tr'); // get the parent row of the clicked button
\t \t $(tableRowAppend).insertAfter(row); // insert content
\t \t var rowId = $(row).attr('id'); // clicked RowId
\t \t \t \t \t
\t \t \t $.ajax({
\t \t \t \t type: "POST",
\t \t \t \t url: "myurl.com",
\t \t \t \t data: { \t
\t \t \t \t \t rowId
\t \t \t \t } \t \t
\t \t \t });
}); \t
<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%">
\t \t <thead data-spy="affix" data-offset-top="100">
\t \t \t <tr>
\t \t \t \t <th>Uhrzeit</th>
\t \t \t \t <th>SpNr</th>
\t \t \t \t <th>Platz</th>
\t \t \t \t <th>Heimmannschaft</th>
\t \t \t \t <th>Gastmannschaft</th>
\t \t \t \t <th>Freispiele</th>
\t \t \t </tr>
\t \t </thead>
\t \t <tbody>
\t \t \t \t <tr id="Row1">
\t \t \t \t \t <td>08:00</td>
\t \t \t \t \t <td>134</td>
\t \t \t \t \t <td>Platz 1</td>
\t \t \t \t \t <td>Team 5</td>
\t \t \t \t \t <td>Team 3</td>
\t \t \t \t \t <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
\t \t \t \t </tr>
\t \t \t \t <tr id="Row2">
\t \t \t \t \t <td>09:00</td>
\t \t \t \t \t <td>76</td>
\t \t \t \t \t <td>Platz 3</td>
\t \t \t \t \t <td>Team 7</td>
\t \t \t \t \t <td>Team 1</td>
\t \t \t \t \t <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
\t \t \t \t </tr>
\t \t \t \t <tr id="Row3">
\t \t \t \t \t <td>17:30</td>
\t \t \t \t \t <td>45</td>
\t \t \t \t \t <td>Platz 11</td>
\t \t \t \t \t <td>Team 2</td>
\t \t \t \t \t <td>Team 9</td>
\t \t \t \t \t <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
\t \t \t \t </tr>
\t \t </tbody>
\t </table>
しかし、どのように私はボタンが(datatable.row.addでクリックされた行の後に新しい行を追加することができます)を参照してください。ドロー()? –
この質問を見てください:http://stackoverflow.com/questions/30712227/datatables-row-add-to-specific-index – psynnott
その後、行並べ替えが機能しません。クリックしたボタンからjsonにrowIdを渡して、そこから新しい行を取得して、データテーブルが更新されるようにする必要があります。 –