DataTables warning: table id=trainingMaterialTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 how to solve this error.
Don't call twice in a page
For Example :
index.html - In javascript section :
Avoid :
<script>
$('#example').dataTable( {
paging: false
} );
$('#example').dataTable( {
paging: false
} );
</script>
Use :
<script>
$('#example').dataTable( {
paging: false
} );
</script>
Related
So I'm using Datatables.JS to create a table of results returned from a MySQL database. When I return the results I'm trying to display them in DESC order. I have tried using ORDER BY DESC in my MySQLi query, this does return the results in the correct order, however when datatables is reading the results it's displaying them in some random order. So I've tried playing with the datatable settings to sort by my ID column but keep that column hidden. Whenever I attempt to add any code to handle the sorting, the sorting issue itself becomes resolved but all my pagination and buttons such as the buttons that allow the user to select which columns they would like to view just disappear. Below is the JS I'm using to select the features and setup I need for this datatable, can anyone show me how to add sorting by the ID column DESC into this without breaking it?
$(document).ready(function() {
$('#datatable').DataTable();
//Buttons examples
var table = $('#datatable-buttons').DataTable({
pageLength: 20,
lengthChange: false,
searching: false,
buttons: ['copy', 'excel', 'pdf', 'colvis']
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
} );
Adding ordering: and then selecting the column and defining the order seems to break all the other settings, I lose my pagination and default results length as well as all control buttons on the page.
$(document).ready(function() {
$('#datatable').DataTable();
//Buttons examples
var table = $('#datatable-buttons').DataTable({
pageLength: 20,
lengthChange: false,
searching: false,
buttons: ['copy', 'excel', 'pdf', 'colvis'],
order: [[ 1, desc ]]
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
} );
I have no idea why this solutions works and I still don't understand what caused the original problem but I did find a working piece of code posted under a loosely relevant problem on another forum. I combined that code with what I had already and it solved my problem. Hopefully this helps someone else out who may encounter the same issue.
$(document).ready(function() {
$('#datatable-buttons').DataTable( {
pageLength: 20,
lengthChange: false,
searching: false,
ordering: true,
order: [[ 3, 'DESC' ]],
dom: 'B1frtip',
buttons: [
'copy',
'excel',
'pdf',
'colvis'
]
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
});
Just wanted to mention this JS was for a datatable that's part of the Fonik Bootstrap Admin Template.
When I use fixed column in JQuery Datatable it doesn't work properly if I resize the window.
If I remove scrollX from options, it appears just fine however fixedColumn feature doesn't work then.
See my options below:
$(document).ready(function() {
$('#example').DataTable( {
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true,
} );
} );
Link To Jsfiddle
Just Add width="100%" in your table tag.
It should be working by doing this.
I am new to data-tables and I am trying to do this but i wanted to do with pagination since the answer provided in the link did not involve any pagination. Is it possible? Because i have tried and when i set the pagination to true, the drop-down solution in the link given won't work.
<script type="text/javascript">
$(document).ready(function() {
$('#datatable-responsive').DataTable( {
"responsive": true,
"paging": true,
"dom": 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
} );
} );
</script>
You can try this alternative solution which is an extensible pagination mechanism in datatable,
$(document).ready(function() {
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );
Please find below link for more details:
https://datatables.net/examples/basic_init/alt_pagination.html
i am working on pagination and i am using DataTables plugin ,
on some tables it's work but on some tables it gives error:
Uncaught TypeError: Cannot read property 'aDataSort' of undefined
my page script looks like:
$(document).ready(function() {
$('.datatable').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"info": true,
"paging": true
} );
} );
//HTML code
<table class="table table-striped table-bordered datatable">
<thead>
<tr>
<th><?php echo lang('date_label')?></th>
<th><?php echo lang('paid_label')?></th>
<th><?php echo lang('comments_label');?></th>
</tr>
</thead>
<tbody>
<?php foreach ($payments as $pay): ?>
<tr>
<td><?php echo dateformat($pay['time_stamp'], TRUE);?></td>
<td><?php echo format_price($pay['amount']);?></td>
<td><?php echo $pay['note'];?></td>
</tr>
<?php endforeach?>
</tbody>
</table>
no idea how the problem comes ,i know this is very common error but i search and found nothing supporting my problem .
does anyone knows the solution ?
use something like the following in your code to disable sorting on DataTables (adapted from a project of mine which uses latest DataTables)
$(document).ready(function() {
$('.datatable').dataTable( {
'bSort': false,
'aoColumns': [
{ sWidth: "45%", bSearchable: false, bSortable: false },
{ sWidth: "45%", bSearchable: false, bSortable: false },
{ sWidth: "10%", bSearchable: false, bSortable: false }
],
"scrollY": "200px",
"scrollCollapse": true,
"info": true,
"paging": true
} );
} );
the aoColumns array describes the width of each column and its sortable properties, adjust as needed for your own table (number of) columns.
I faced same issue and later found a typing mistake in "targets" property under columnDefs. See below example,
WRONG code below,
{
"name": "firstName",
"target": [1],
"visible": false
}
Correction - missed 's' in targets :(
{
"name": "firstName",
"targets": [1],
"visible": false
}
Looks like this error occurs when something causing columns not getting initialized. I checked that event 'preInit.dt' is not fired in this case.
Hope this helps someone.
I ran into this issue using KnockoutJS because the columns were not yet defined when the javascript was trying to apply the DataTable to it. My approach with knockoutJS was to move my data-bind code into a knockout template and use the afterRender event to apply the DataTable to the table.
Here is a link to the knockoutJS docs for the template afterRender event.
Here is what my data-bind looks like:
<div data-bind="template: { name: 'schedule-table', data: $data, afterRender: setupDataTable }"></div>
There was one more trick. In the setupDataTable function, the table still isn't setup completely, (I was trying to get the fixedHeaders and the widths weren't setup yet). So I called setTimeout with a 0 millisecond delay to get the code to run on the first idle cycle.
Here is my setupDataTable:
function setupDataTable() {
setTimeout(function() {
$("#schedule").DataTable({fixedHeader: true});
}, 0);
}
Hope this helps somebody else looking for a knockoutJS solution and running into the same problem I ran into.
This error showed up for me, I believe because my "mData" and "sTitle" were undefined.
I had faced a similar issue when binding data table to a .Net GridView if grid view did not have any data and no header values defined then it was throwing:
Uncaught TypeError: Cannot read property 'aDataSort' of undefined
Below was the code for the same.
$("#GridView1").prepend($("<thead</thead>").append($("#GridView1").find("tr:first"))).dataTable();
$("#GridView1").dataTable();
I guess you are also facing the same issue, as you are also getting the table header names dynamically and if the result for it is null or empty then you are getting the mentioned error. Therefore, either you try giving column names when binding it to data table or make sure that your PHP code always returns some data for the table header.
Is anyone tried DataTables, when I bind(init) it to a <table>, data is sorted.
Is there anyway to disable the default sorting?
According to DataTabe's reference manual, this should work:
$('#example').dataTable({
"aaSorting": []
});
try this:
$(document).ready(function () {
$('#example').dataTable({
"order": [[3, "desc"]]
});
});