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">
  <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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    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.

    Cheers,

    Colin

  • ZynoxZynox Posts: 2Questions: 1Answers: 0

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

This discussion has been closed.