JQueryデータ型の順序付けとrowReorderが機能しない

Question

テーブルの順序を変更してテーブルを並べ替えるが、このコードブロックでは機能しません。私の問題はどこですか？

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/> 

HTML

<thead> 
    <tr> 
     <th id="tdbicim">ID</th> 
     <th id="tdbicim">Data One</th> 
     <th id="tdbicim">Data Two</th> 
    </tr> 
</thead> 

<tbody id="MyTbody"></tbody> 

JS

var MyTbody = document.getElementById("MyTbody"); 

$('#MyTable').DataTable({ 
    "paging": false, 
    "lengthChange": false, 
    "searching": false, 
    "ordering": true, 
    "info": false, 
    "autoWidth": false, 
    "rowReorder": true 
}); 

var Row = document.createElement("tr"); 
var Column = document.createElement("td"); 

Column.appendChild(document.createTextNode("1")); 
Row.appendChild(Column); 

Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("Data One Column")); 
Row.appendChild(Column); 

Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("Data Two Column")); 
Row.appendChild(Column); 

// Add row 
MyTbody.appendChild(Row); 

Row = document.createElement("tr"); 
Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("2")); 
Row.appendChild(Column); 

Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("Data One Column")); 
Row.appendChild(Column); 

Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("Data Two Column")); 
Row.appendChild(Column); 

// Add row 
MyTbody.appendChild(Row); 

Row = document.createElement("tr"); 
Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("3")); 
Row.appendChild(Column); 

Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("Data One Column")); 
Row.appendChild(Column); 

Column = document.createElement("td"); 
Column.appendChild(document.createTextNode("Data Two Column")); 
Row.appendChild(Column); 

// Add row 
MyTbody.appendChild(Row); 

https://jsfiddle.net/txsnyh66/

Answer 1

私はあなたの問題について2つのことを言うことができます。

1.データテーブルを初期化した後で、動的に行を追加しています。

var MyTbody = document.getElementById("MyTbody"); 
 
var Row = document.createElement("tr"); 
 
var Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("1")); 
 
Row.appendChild(Column); 
 

 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("Data One Column")); 
 
Row.appendChild(Column); 
 

 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("Data Two Column")); 
 
Row.appendChild(Column); 
 

 
MyTbody.appendChild(Row); 
 

 
Row = document.createElement("tr"); 
 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("2")); 
 
Row.appendChild(Column); 
 

 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("Data One Column")); 
 
Row.appendChild(Column); 
 

 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("Data Two Column")); 
 
Row.appendChild(Column); 
 

 
MyTbody.appendChild(Row); 
 

 
Row = document.createElement("tr"); 
 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("3")); 
 
Row.appendChild(Column); 
 

 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("Data One Column")); 
 
Row.appendChild(Column); 
 

 
Column = document.createElement("td"); 
 
Column.appendChild(document.createTextNode("Data Two Column")); 
 
Row.appendChild(Column); 
 

 
MyTbody.appendChild(Row); 
 

 
// Initialize DataTable after table is generated 
 
$('#MyTable').DataTable({ 
 
    "paging": false, 
 
    "lengthChange": false, 
 
    "searching": false, 
 
    "ordering": true, 
 
    "info": false, 
 
    "autoWidth": false, 
 
    "rowReorder": true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css" /> 
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script> 
 

 
<table id="MyTable" class="table table-bordered "> 
 
    <thead> 
 
    <tr> 
 
     <th id="tdbicim">ID</th> 
 
     <th id="tdbicim">Data One</th> 
 
     <th id="tdbicim">Data Two</th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody id="MyTbody"> 
 
    </tbody> 
 

 
</table>

2.しかし、あなたが動的にテーブルを生成したい場合、私はあなたのためのDataTable自体を使用することをお勧め：あなたは、これを動的にチェックし、あなたのテーブルを生成した後ので、あなただけのデータテーブルを初期化することができますこのように、この目的：

var dataSet = [ 
 
[1, "Aaaa", "ddd"], 
 
[2, "DASD", "564"], 
 
[3, "HH", "dsdfd"], 
 
]; 
 
    
 
$(document).ready(function() { 
 
    $('#MyTable').DataTable({ 
 
     data: dataSet, 
 
     columns: [ 
 
      { title: "ID" }, 
 
      { title: "Column 1" }, 
 
      { title: "Column 2" } 
 
     ] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css" /> 
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script> 
 

 
<table id="MyTable"></table>

ソリューションナンバー2に進むことをお勧めします。それははるかにクリーンでエレガントです。がんばろう！