Table filter not working after append data

Table filter not working after append data

ZynoxZynox 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">
    <meta charset="utf-8">
    <script src=""></script>
    <link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" charset="utf8" src=""></script>

    <div id="te"></div>
    <table id="data1">
    <th>Country Base</th>


  /*Start parsing JSON */

   var url = "";

   $.getJSON(url, function(data) {

    var entry = data.feed.entry;


     $('#data1 tbody').append(

  /*end parsing JSON */

  $(document).ready(function() {

 var table =$('#data1').DataTable();




This question has an accepted answers - jump to answer


  • colincolin Posts: 9,165Questions: 0Answers: 1,532
    Answer ✓

    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.



  • ZynoxZynox Posts: 2Questions: 1Answers: 0

    Hi @colin, thank you for the solution. It works :)

This discussion has been closed.