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。您在初始化数据表后动态添加行。因此，您可以在动态生成表后初始化数据表，请检查：

＆＃13;

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
});

＆＃13;

<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>

＆＃13;

2. 但是如果你想动态生成你的表，我建议你像这样使用DataTable本身：

＆＃13;

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" }
        ]
    } );
} );

＆＃13;

<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>

＆＃13;

我鼓励你选择2号解决方案，它更清洁，更优雅。祝你好运！

Jquery Datatable排序和rowReorder不起作用

1 个答案: