Datatables server side code

Question

My table code is this

<table class="table responsive-table" id="sorting-advanced">
                <thead>
                    <tr>
                        <th scope="col">Estado</th>      
                        <th scope="col" width="5%" class="align-center hide-on-mobile">Registo</th>
                        <th scope="col" width="5%">Expiração</th>
                        <th scope="col" width="5%" class="align-center hide-on-mobile">Inserção</th>
                        <th scope="col" width="10%">Dominio</th>
                        <th scope="col" width="10%" class="align-center hide-on-mobile">Titular</th>
                        <th scope="col" width="15%" class="align-center hide-on-mobile">Morada Tit.</th>
                        <th scope="col" width="10%">Email Tit.</th>
                        <th scope="col" width="15%" class="align-center hide-on-mobile">Localidade Tit.</th>
                        <th scope="col" width="15%" class="align-center hide-on-mobile">Cód. Postal</th>
                        <th scope="col" class="align-center hide-on-mobile">Nome Ent.</th>
                        <th scope="col" class="align-center hide-on-mobile">Email Ent.</th>
                        <th scope="col" class="align-center hide-on-mobile">Nome Tec.</th>
                        <th scope="col" class="align-center hide-on-mobile">Email Tec.</th>
                        <th scope="col" width="10px" >IP</th>
                        <?php if ($_SESSION['update'] == '1'){echo '<th scope="col" width=20px>Black</th>';} ?>

                    </tr>
                </thead>
                <tbody>

                </tbody>

                <tfoot>

                </tfoot>
            </table>

My datable code...

<script>

        // Call template init (optional, but faster if called manually)
        $.template.init();


        // Table sort - DataTables
        var table = $('#sorting-advanced'),
            tableStyled = false;

        table.dataTable({
            "iCookieDuration": 60*60*2 , 
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "http://pgcc.datasource.pt/beta/listas/whois.php",
            "sScrollX": "100%",
            "bScrollCollapse": true,
            'sPaginationType': 'full_numbers',
            'oLanguage': {
                    "sProcessing":   "A processar...",
                    "sLengthMenu":   "Mostrar _MENU_ domínios",
                    "sZeroRecords":  "Não foram encontrados resultados",
                    "sInfo":         "Lista de domínios | <button class=\"button compact green-gradient\" onClick=\"javascript: openModal();\">Adicionar</button>",     
                    "sInfoEmpty":    "Não foram encontrados resultados",
                    "sInfoFiltered": "",
                    "sInfoPostFix":  "",
                    "sSearch":       "Procurar:",
                    "sUrl":          "",
                    "oPaginate": {
                        "sFirst":    "Primeiro",
                        "sPrevious": "Anterior",
                        "sNext":     "Seguinte",
                        "sLast":     "Último"
            }
            },
            'sPaginationType': 'full_numbers',
            'fnDrawCallback': function( oSettings )
            {
                // Only run once
                if (!tableStyled)
                {
                    table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
                    tableStyled = true;
                }
            },

        });
            oTable = $('#sorting-advanced').dataTable();

            function fnShowHide( iCol )
            {
                /* Get the DataTables object again - this is not a recreation, just a get of the object */

                var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
                oTable.fnSetColumnVis( iCol, bVis ? false : true );

            }
            $(document).ready(function(e) {
                fnShowHide(1); 
                fnShowHide(3); 
                fnShowHide(5); 
                fnShowHide(6); 
                fnShowHide(8); 
                fnShowHide(9); 
                fnShowHide(10); 
                fnShowHide(11); 
                fnShowHide(12); 
                fnShowHide(13);
            });

    </script>


    <script>

        $('#mudar').change(function(){
            var valor = $(this).val(); 
            $.post('pesquisar.php',{valor: valor}, function(data){
            $('#pesquisa').html(data)
            });
        });

    </script>

And the JSON that I get...

{"sEcho":0,"iTotalRecords":"2","iTotalDisplayRecords":"2","aaData":[["1","2012-08-06 17:49:05","2012-08-07","2012-08-06","nuno.pt","Nuno Almeida","Rua dos Frades","nuno_ng21@hotmail.com","Seia","1231","Gonçalo Cabral","g.cabral@datasource.pt","Datasource","teste@hotmail.com","192.168.1.0","1"],["1","2012-08-06 17:49:05","2012-08-07","2012-08-06","rumonet.pt","Nuno Almeida","Rua dos Frades","nuno_ng21@hotmail.com","Seia","1231","Gonçalo Cabral","g.cabral@datasource.pt","Datasource","teste@hotmail.com","192.168.1.0","2"]]}

But when I load, the table dosn't do nothing... it appears only one white square in the middle, and nothing loads...

if i change the sAjaxsource to a file that allraedy worked, it show's results, but the output JSON format is equal...

Any1 know why this is happening? :(

Answer 1

The only thing i can think of, are you sending back the same sEcho the table creates?From the docs

string sEcho An unaltered copy of sEcho sent from the client side. This parameter will change with each draw (it is basically a draw count) - so it is important that this is implemented. Note that it strongly recommended for security reasons that you 'cast' this parameter to an integer in order to prevent Cross Site Scripting (XSS) attacks.

if you just respond always with the same json, you should omit sEcho (and know the dangers in omitting it )