Can't use sort by column or search in content
Can't use sort by column or search in content
Majestic
Posts: 14Questions: 7Answers: 0
Hello !
I'm creating a DataTable in a javascript function and when I do, the "search" filter does not appear and the column's sorting is not working. Actually, it looks like the CSS is not working anymore.
Here's my code :
<html>
<head>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet"/>
</head>
<body>
<div id="area-panel-content" class="col-md-12">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Repository</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr><td>AAA</td><td>AAA</td><td>AAA</td></tr>
<tr><td>BBB</td><td>BBB</td><td>BBB</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script>
$(document).ready(function() {
var currentTable = $('#example').DataTable();
fillDataTable();
} );
function fillDataTable() {
var folders = "";
for(var i = 0; i < 5; i++) {
folders = folders+
'<tr><td><i class="fa fa-folder" aria-hidden="true"></i>Event'+i+'</td><td>25/12/2018</td><td></td></tr>';
}
var tableStart = '<table id="example" class="display" style="width:100%"><thead><tr><th class="sorting" aria-sort="ascending">Repository</th><th class="sorting" aria-label="Column 2: activate to sort column ascending">Date</th><th>Action</th></tr></thead><tbody>';
var tableEnd = '</tbody></table>';
$("#area-panel-content").replaceWith('<div id="area-panel-content" class="col-md-12">'+tableStart+folders+tableEnd+'</div>');
}
</script>
</body>
</html>
If you comment the function fillDataTable(), it's working fine. I need to create a DataTable like I'm trying to do it above snippet.
Could you help me out to understand what I'm doing wrong ? Many thanks.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Sounds like you are getting a Javascript error. Have you checked your browser's console for errors?
Kevin
Hello Kevin,
I do not see any error in console.
What is the error you mean ?
Generally when the Datatables functions and formatting aren't available that means a Javascript error has occurred. Asked because I didn't see anything obvious with a quick look at your code.
I put your code into a test case to show you what you can do to make it work:
http://live.datatables.net/jamodago/1/edit
Your original code is creating a Datartable then destroying an rebuilding the
tabletag. This removes any Datatables features added to the table.Then you are directly adding the table rows to the
table. Even if you hadn't removed the -tag tableDatatables would know about the additional rows added via jQuery. You would need to use-api rows().invalidate()` for Datatables to update its data cache.I provided a second option that shows how this can be done using Datatable API's;
clear()androws.add(). Much cleaner and the recommended way if you can do it. Note that thefolderstring is added using jQuery$(folder).Kevin
I'd like to thank you for your explanations !
I understood what I was doing wrong. Indeed your way to do it is, much cleaner.
You helped me so much ! Everything is working.
Have a nice day Kevin