CODEWITHSUNDEEP
javascriptjquerydatatabledatatables
Zibian Domichi
Zibian Domichi

Reputation: 185

Jquery Datatable ordering and rowReorder doesn't work

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/

Upvotes: 0

Views: 330

Answers (1)

codtex
codtex

Reputation: 6548

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!

Upvotes: 1

Related Questions