Unable to initialize row reordering plugin - rowReordering is not a function
I am using jQuery DataTables with Row Reordering add-on and for some reason I am getting the following error:
Uncaught TypeError: $ (...). DataTable (...). rowReordering is not a function
wherein:
$(document).ready(function() {
$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display cell-border" id="example" ></table>');
t = $('#example').DataTable({
"columns":
[
{width: "10%", "className": "ageClass", "title": "Priority", "data": "priority" },
{"className": "actionClass", "title": "Action", "data": "action" },
],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
}).rowReordering();;
// This line is where the console says the error is
for (var i = 0; i < 10; i ++)
{
t.row.add(
{
priority: i,
action: i,
}).draw();
}
});
HTML:
<div id="demo"> </div>
I just do what is described here: https://code.google.com/p/jquery-datatables-row-reordering/wiki/Index
source to share
CAUSE
Original The add-in reordering string is incompatible with DataTables 1.10.
$(selector).DataTable()
was added in DataTables 1.10 after the row reordering add-on was updated .
Decision
For DataTables 1.9
To use rowReordering()
, you need to initialize the table as $('#example').dataTable()
, not $('#example').dataTable()
.
For DataTables 1.10
I have forked add-on on github and added DataTables 1.10 support using suggestions in comments.
See jQuery DataTables - Reordering String for more details and demo for details.
DEMO
$(document).ready( function () {
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex ) {
$(row).attr('id', 'row-' + dataIndex);
}
});
for(var i = 1; i <= 100; i++){
table.row.add([
i,
i + '.2',
i + '.3',
i + '.4',
i + '.5',
i + '.6'
]);
}
table.draw();
table.rowReordering();
} );
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="http://mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"></script>
</head>
<body>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html>
source to share