Can't Reinitialize DataTable Error
Can't Reinitialize DataTable Error
whichrtmej
Posts: 3Questions: 1Answers: 0
I am new to datatables, query and have been trying to load a datatable on the click of a button. I want my datatable to also have Alphabetical input search capabilities.
When I click on the button to load the table I get the following error: "DataTables warning: table id=example - Cannot reinitialize DataTable. For more information about this error, please see...."
When I click "OK" on the error my DataTable loads, looks and works as it should. I can't figure out how to get ride of the error. See my code below. Any help would be appreciated.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<style>
div.alphabet {
display: table;
width: 90%;
margin-bottom: 1em;
margin-top: 1em;
}
div.alphabet span {
display: table-cell;
color: #3174c7;
cursor: pointer;
text-align: center;
width: 3.5%
}
div.alphabet span:hover {
text-decoration: underline;
}
div.alphabet span.active {
color: black;
}
</style>
<script>
$(document).ready(function(){
$("#btnShow").click(function(){
if(! $.fn.DataTable.isDataTable( '#example' )){
showTable();
}
});
});
function showTable(){
$('#example').css("display","");
var table = $('#example').DataTable({
"responsive": true,
"ajax": "data/ticatsAllTimeRoster.txt"
});
var table = $('#example').DataTable( {
dom: 'Alfrtip'
} );
var _alphabetSearch = '';
$.fn.dataTable.ext.search.push( function ( settings, searchData ) {
if ( ! _alphabetSearch ) {
return true;
}
if ( searchData[0].charAt(0) === _alphabetSearch ) {
return true;
}
return false;
} );
$(document).ready(function() {
var table = $('#example').DataTable({
retrieve: true
});
var alphabet = $('<div class="alphabet"/>').append( 'Search: ' );
$('<span class="clear active"/>')
.data( 'letter', '' )
.html( 'None' )
.appendTo( alphabet );
for ( var i=0 ; i<26 ; i++ ) {
var letter = String.fromCharCode( 65 + i );
$('<span/>')
.data( 'letter', letter )
.html( letter )
.appendTo( alphabet );
}
alphabet.insertBefore( table.table().container() );
alphabet.on( 'click', 'span', function () {
alphabet.find( '.active' ).removeClass( 'active' );
$(this).addClass( 'active' );
_alphabetSearch = $(this).data('letter');
table.draw();
} );
} );
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<button class="btn btn-info" id="btnShow" name="myTaskList">
My Task List
</button>
</div>
</div>
<div class="row" style="margin-top:2em">
<div class="col-md-10" id="myTaskListTable">
<table class="table display" style="display:none" id="example">
<thead>
<tr>
<th>Name</th>
<th>Pos</th>
<th>No</th>
<th>Yrs</th>
<th>GP</th>
<th>Collage</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
whichrtmej
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Hi, it's because you are initialising the table twice with different options: lines 45 and 50. Just put the 'dom' on line 51 into the first initialisation
C
Works great. Thank you very much.
So once the table is displayed and a use selects another table to display, not a DataTable, the DataTable is hidden and the user's new table is shown. If I go back to show my original DataTable it will not show up.
Do I need to destroy the hidden table then reload it or just reload it? Where would I put the reload/destroy code as I have tried placing it in an else statement as below, which did not work.
Thanks whichrtmej
It entirely depends on how you are hiding it. If you are removing it from the DOM, that you could insert it back in (assuming you have a reference to it). If you are just using
display:nonethendisplay:blockshould be all that is needed.I'd need a link to a test case showing the issue to be able to say more than that. JSFiddle or http://live.datatables.net can be used to create a test case if you can't host it yourself.
Allan