I'm trying to start the table empty with no data in <tbody> and choose some parameters send to the server via $.getJSON and append the returned json data inside <tbody>.

But it looks like because of the $(document).ready() it makes it not work properly, the pagination and the search stop working pletely.

BTW, I'm including all the needed files, I know that the error is because I'm populating the table after the page loads, I just would like to know if there is another approach to solve this problem.

Here is my code:

<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
       $('#contacts').dataTable({
           "sPaginationType" : "full_numbers"
       });
        
       $("#submit").click(function()
             {
           $.getJSON("/myurl",
           function(data) 
           {
               $("#table_body").empty();
               $.each(data, function(i, item) 
               {                                    
                   $("#table_body").show("slow");
                   $("#table_body")
                   .append(
                       '<tr class="gradeC">' +
                           '<td>' + item.name+ '</td>' +
                           '<td>' + item.birthdate + '</td>' +
                           '<td>' + item.age + '</td>' +
                       '</tr>'
                   );
               });
           });
       });
   });
</script>


<!-- NOW THE HTML CODE FOR THE TABLE -->


<table cellpadding="0" cellspacing="0" border="0" class="display" id="contacts">
   <thead>
      <tr>
         <th>Name</th>
         <th>Birthdate</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody id="table_body"></tbody>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Birthdate</th>
         <th>Age</th>
      </tr>
   </tfoot>
</table>

I'm trying to start the table empty with no data in <tbody> and choose some parameters send to the server via $.getJSON and append the returned json data inside <tbody>.

But it looks like because of the $(document).ready() it makes it not work properly, the pagination and the search stop working pletely.

BTW, I'm including all the needed files, I know that the error is because I'm populating the table after the page loads, I just would like to know if there is another approach to solve this problem.

Here is my code:

<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
       $('#contacts').dataTable({
           "sPaginationType" : "full_numbers"
       });
        
       $("#submit").click(function()
             {
           $.getJSON("/myurl",
           function(data) 
           {
               $("#table_body").empty();
               $.each(data, function(i, item) 
               {                                    
                   $("#table_body").show("slow");
                   $("#table_body")
                   .append(
                       '<tr class="gradeC">' +
                           '<td>' + item.name+ '</td>' +
                           '<td>' + item.birthdate + '</td>' +
                           '<td>' + item.age + '</td>' +
                       '</tr>'
                   );
               });
           });
       });
   });
</script>


<!-- NOW THE HTML CODE FOR THE TABLE -->


<table cellpadding="0" cellspacing="0" border="0" class="display" id="contacts">
   <thead>
      <tr>
         <th>Name</th>
         <th>Birthdate</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody id="table_body"></tbody>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Birthdate</th>
         <th>Age</th>
      </tr>
   </tfoot>
</table>

• javascript
• jquery
• datatables

3 Answers 3

It doesn't appear that you are using the Datatables API properly. Read through the documentation and try using the datatables methods for adding rows and emptying the table, etc.

Try using the $(function() { ... }); syntax instead. I recently had an issue where $(document).ready(function() { ... }); wasn't working. I tried the newer syntax and it fixed it...

Hope this helps.

fnAddData() should not be used for loading entire content row by row. To table content from JSON you can set this url in the sAjaxSource property and define mappings between JSON properties and columns. See examples on:

http://datatables/release-datatables/examples/ajax/objects.html

http://datatables/release-datatables/examples/ajax/deep.html

I believe that your approach works, but take a look on this pages too maybe it would be easier to load them this way.

Jovan