Table filter not working after append data
Table filter not working after append data
Zynox
Posts: 2Questions: 1Answers: 0
I import the data from Google sheet by using getJSON function to add the data to the table. But the default table filter didn't work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<div id="te"></div>
<table id="data1">
<thead>
<th>Country Base</th>
<th>Name</th>
<th>Company</th>
<th>Position</th>
<th>Programme</th>
</thead>
<tbody>
</tbody>
</table>
<script>
/*Start parsing JSON */
var url = "https://spreadsheets.google.com/feeds/list/1Ecm7I0bOe9zAHQzqBBitTWwlbQBWLG0Wg_-VNiD7TJA/od6/public/values?alt=json";
$.getJSON(url, function(data) {
var entry = data.feed.entry;
$(entry).each(function(){
$('#data1 tbody').append(
'<tr><td>'+this.gsx$country.$t+'</td><td>'+this.gsx$name.$t+'</td><td>'+this.gsx$company.$t+'</td><td>'+this.gsx$position.$t+'</td><td>'+this.gsx$programme.$t+'</td></tr>');
});
});
/*end parsing JSON */
$(document).ready(function() {
var table =$('#data1').DataTable();
});
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @Zynox ,
It's probably because of the asynchronous nature of the Ajax request. If you move the DataTables initialisation to line 40, it should be fine. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi @colin, thank you for the solution. It works