jQuery Datatable排序和rowReorder不起作用

Question

I want to make reorder the table and ordering the table but in this code block they doesn't work. Where is my issue?

<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

Well I can say two things about your problem.

1. You are dynamically adding your rows after you initialized your datatable. So you can just initialize the datatable after you dynamically generate your table check this:

 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. But if you want to dynamically generate your table I suggest you to use DataTable itself for this purpose like this:

 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> 

I encourage you to go with solution number 2, it is much more cleaner and elegant. Good Luck!