2016-12-08 6 views
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>

答えて

0

あなたは、DataTableのAPIを使用して行を追加する必要があるので、それはそれについて知っています。 JQueryだけを使用しないでください。

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

+0

しかし、どのように私はボタンが(datatable.row.addでクリックされた行の後に新しい行を追加することができます)を参照してください。ドロー()? –

+0

この質問を見てください:http://stackoverflow.com/questions/30712227/datatables-row-add-to-specific-index – psynnott

+0

その後、行並べ替えが機能しません。クリックしたボタンからjsonにrowIdを渡して、そこから新しい行を取得して、データテーブルが更新されるようにする必要があります。 –

関連する問題