Table always displays showing 0 to 0 of 0 entries filtered

simotux

https://debug.datatables.net/araqek

Hello guys,
I'm using datatables 1.10 and the footer always displays as title. I've already found and read other similar topics but i can't resolve this issue.

I get data from array through JQuery script. It seems that table can't recognize rows.

Thank you in advance!

allan

I don't immediately see the issue from the debugger. Could you give me a link to the page please?

Allan

simotux

Hello allan,
please check your private messages with the account info.

Thank you,
Simone

allan

Hi Simone,

Thanks for the link - but I'm a bit confused I'm afraid. Your table doesn't have a footer (tfoot) so I'm not sure what the issue is?

You also appear to be adding the table elements directly to the HTML rather than using the DataTables API, or having it load them via Ajax. See this FAQ for why that won't work.

Allan

simotux

Excuse me, I got confused: i wanted to say in thead. I load data in tbody, calling an 'id' that contains the result of JS html append with query result.

Thank you,
Simone

simotux

Ok, i've solved the error but i get a new one:
"TypeError: Cannot read property 'length' of undefined"

This appear only on Chrome and Safari, not in Firefox.

Thank you in advance,
Simone

allan

Can you show me (or tell me where to find) the code where you add the rows to the table please? I don't seem to be able to find it.

Allan

simotux

Sure :) thank you!

<script>

                                    <?php
                                    if (isset($_GET) && isset($_GET['id'])){
                                    ?>
                                $( document ).ready(function() {
                                    carica_ricetta('<?php echo $_GET['id'];?>');
                                });
                                    <?php }else {?>

                                $('#query').keypress(function(e) {
                                    if (e.keyCode == $.ui.keyCode.ENTER) {
                                         $('#cerca').click();
                                    }
                                });


                                var jqxhr = $.ajax({url: api_ricerca_ricette, type: "GET",dataType: "json", data: { all: 1, ln : "it"}} )
                                        .done(function(json) {
                                            if (json.res==0){
                                                alert( "Inserisci una parola per iniziare la ricerca " );
                                                return;
                                            }
                                            var max=json.items.length;
                                            html="";
                                            for (i=0;i<max;i++){
                                                var el=json.items[i];
                                                html+='<tr><td><span class="risultato_ricerca" data-id="'+el.id+'"><img src="'+el.imm_home.thumb+'" class="img-circle" width="30" height="30"> '+el.nome+'</span></td><td>undefined</td></tr>';
                                            }
                                            $("#risultato").html(html);
                                            $(".risultato_ricerca").click(function() {

                                                carica_ricetta($(this).attr('data-id'));
                                            });
                                        })
                                        .fail(function() {
                                                alert( "error" );
                                        });

                                <?php }?>

                                </script>
              
                <table class="table table-responsive table-hover table-dynamic filter-head">
                  <thead>
                    <tr>
                      <th><div style="display:none">Nome</div></th>
                      <th><div style="display:none">Ingredienti associati</div></th>
                    </tr>
                  </thead>
                  <tbody id="risultato"></tbody>
                </table>

simotux

P.S. "undefined" text is just for a test.

allan

Thanks. It would appear you are adding the content to the table directly, rather than using the DataTables API. As I noted above:

You also appear to be adding the table elements directly to the HTML rather than using the DataTables API, or having it load them via Ajax. See this FAQ for why that won't work.

You can see that causing issues when you try to order the table - click to sort and all the data disappears (since it hasn't been added to the DataTable).

Either let DataTables make the Ajax request or use the row.add() method to add a row to the table.

Allan

simotux

Hello Allan,
thank you for your reply.

I didn't change anything, but i noticed that sometimes only Firefox is able to show correctly rows and searchform (sometimes, not always). What could be the problem in this case?

I guess is not the API, at this time, but i'am not sure.

Thank you,
Simone

allan

I don't think so. As I say above, you need to add the rows to the DataTable and let it update the DOM. If you update the DOM yourself, then DataTables doesn't know that!

Allan

simotux

Hello Allan,

Forgive me. I'm a newbie and i did a misunderstanding but you replied and helped me like a super hero :) now i've got and i see that i receive a right array (via console.log).
I can't see rows cause this problem: "Uncaught TypeError: Cannot read property 'aDataSort' of undefined". I searched over the documentation but i can't understand what i have to put. Thank you for your precious help!

var dataSet = [];
                    for (i=0;i<json.items.length;i++){
                      var el = [json.items[i].nome,json.items[i].completo, json.items[i].home, json.items[i].utente, json.items[i].likes, json.items[i].countingredienti];
                      dataSet[i] = el;
                      console.log(el);
                    }

$(document).ready(function() {
                      $('#example').DataTable( {
                        data: dataSet,
                        columns: [
                          { title: "Nome" },
                          { title: "Stato" },
                          { title: "Home" },
                          { title: "Utente" },
                          { title: "Mi piace" },
                          { title: "Contributi" }
                        ]
                      } );
                    } );

<table id="example" class="table table-responsive table-hover table-dynamic filter-head"></table>

allan

Could you update the link you sent me with your changes so I can take a look and see what is causing this error?

Thanks,
Allan

simotux

Here we go :)
https://testredazione.flickonfood.com/ingredienti2.php

Thank you!
Simone

simotux

Ok. Now no error but table results empty. Thank you :(

<script>
            <?php
            if (isset($_GET) && isset($_GET['id'])){
              ?>
              $( document ).ready(function() {
                carica_ingrediente('<?php echo $_GET['id'];?>');
              });
              <?php }else {?>
                $('#query').keypress(function(e) {
                  if (e.keyCode == $.ui.keyCode.ENTER) {
                    $('#cerca').click();
                  }
                });

                  var jqxhr = $.ajax({url: api_ricerca_ingredienti, type: "GET",dataType: "json", data: {all: 1, ln : "it",completo:"-1",conteggio: 1}} )
                  .done(function(json) {
                    if (json.res==0){
                      alert( "Inserisci una parola per iniziare la ricerca " );
                      return;
                    }
                    var dataSet = [];
                    for (i=0;i<json.items.length;i++){
                      var el = [json.items[i].nome,json.items[i].completo, json.items[i].home, json.items[i].utente, json.items[i].likes, json.items[i].countingredienti];
                      dataSet[i] = el;
                    }
                    $(".risultato_ricerca").click(function() {
                      carica_ingrediente($(this).attr('data-id'));
                    });

                  $(document).ready(function() {
                    $('#example').DataTable( {
                        data: dataSet,
                        destroy: true,
                        retrieve: true
                      } );
                    } );


                  })
                  .fail(function() {
                    alert( "error" );
                  });
                <?php }?>
                </script>

                <table id="example" class="table table-responsive table-hover table-dynamic filter-head">
                  <thead>
                    <tr>
                      <th>Nome</th>
                      <th>Online</th>
                      <th>Home</th>
                      <th>Utente</th>
                      <th>Like</th>
                      <th>Ingredienti</th>
                    </tr>
                  </thead>
                     <tbody></tbody>
                </table>

allan

I get a Javascript error in the console:

ingredienti2.php:184 Uncaught ReferenceError: reggie is not defined

the line is var dateArray = reggie.exec(el.data_update); (:184)

reggie doesn't appear to be defined anywhere.

Allan

simotux

...and not only. I also used row.add like suggested by you:

var rowNode = table
                      .row.add( ["<span class='risultato_ricerca' data-id='"+json.items[i].id+"'><img src='"+json.items[i].imm_home.thumb+"' width='30' height='30' class='img-circle'> "+json.items[i].nome+"</span>",json.items[i].completo, json.items[i].home, json.items[i].likes, json.items[i].countingredienti,json.items[i].data_update] )
                      .draw()
                      .node();}

It works like a charm! I did various errors and i didn't understand your point completely (cause i'm newbie, not you).

You're a wizard! Thank you for your big help and your amazing plugin!