jQuery Datatable排序和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

好吧，我可以说两点有关您的问题。

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，它更干净，更优雅。 祝好运！