rows.add gives No data available in table

mherni

Hello,

Congratulations for this great sw.

I am starting to install DataTables in a Wordpress web page as a plugin.

I have created the plugin and I have been able to make the initialization of the table using Ajax in the client side mode (since I expect volume is adequate).

Once the DataTable get initializated we would like the users be able to filter using two fields whose values are sent to the server (via Ajax). The server will perform a query with those two values and return a JSON answer to DataTables.

I have been able to send the values to the server and get the answer back and delete actual content in the table. The problem is that when I process the data with row.add the table shows: No data available in table.
I have searched in the documentation available and forums and I do not find what can be wrong.

I have run the DataTable script debug and the code is: ewudaj
The version installed is 1.10.15 so it is up to date.

The Javascript is:

jQuery(document).ready(function() {
   var tabla = jQuery('#example').DataTable( {
        "ajax": php_vars.ajaxurl+'?action=qhocio2',
        columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 },
        { data: 3 },
        { data: 4 },
        { data: 5 }
        ]
   });
    tabla.on( 'xhr', function () {
            var json = tabla.ajax.json();
            alert( JSON.stringify(json) +' row(s) were loaded' );
    });
       jQuery('#cat1').on('click', function(){
            var1 =  jQuery("#inp1").val();
            jQuery("#test1").text(var1);
   
            jQuery.ajax({
                        url: php_vars.ajaxurl+'?action=qhocio2',
                        type: "POST",
                        dataType: "json",
                        data: {'var1':var1},
                        success: function(data, status){  
                                alert("Data: " + JSON.stringify(data) + "\nStatus: " + status);
                                tabla.rows().remove().draw();
                                tabla.rows.add(data).draw();
                                console.log(data);
                                jQuery( "#original" ).html( "Original String:" + JSON.stringify(data) );
                                }
            });
        });
});

The code

tabla.on( 'xhr', function () {
            var json = tabla.ajax.json();
            alert( JSON.stringify(json) +' row(s) were loaded' );

is for debugging purposes. In the alert it shows the json response from the server is:
{"data":[["a","b","c","d","e","f"]]}

Also, in the Chrome console the response to the Get for initialize the table is:
{"data":[["a","b","c","d","e","f"]]}

The code

 jQuery('#cat1').on('click', function(){
            var1 =  jQuery("#inp1").val();
            jQuery("#test1").text(var1);

is used to take the value of the user from an input field (it is translated to the test html element for debugging). Remember that for this example the server is answering always the same.

The ajax code sends the var1 value to the server. Then the answer is received, the table deleted from actual values (with rows.remove) and the message "No data available in table" is shown in the table.
I have checked the server answer with four ways:
1. The alert data shown on screen by the Ajax succes function that displays:
Data: {"data":[["a","b","c","d","e","f"]]}
Status: success
2. The Chrome console response to the Post of this Ajax call that displays:
{"data":[["a","b","c","d","e","f"]]}
3. The console.log in Chrome.
4. The html element #original that shows same answer:
Original String:{"data":[["a","b","c","d","e","f"]]}

So the four checks are the same and also are the same as the answer received for the DataTable initialization. So I do not understand why the same answer of the server works for the initialization and does not work here.

The php code is comprised of 2 parts:

The html table:
```
function qhocio() {

<?php >

Input field:

category1

to check var1

<?php echo '<table id="example" class="display" cellspacing="0" width="100%">' ; echo '' ; echo '' ; echo 'Name' ; echo 'Position' ; echo 'Office' ; echo 'Extn.' ; echo 'Start date' ; echo 'Salary' ; echo '' ; echo '' ; ?>

echo   '</table>' ;
wp_localize_script( 'queocioso', 'php_vars', array('ajaxurl' => admin_url( 'admin-ajax.php' )));

<?php >

<?php } ``` And the function that answers the Ajax calls with json (remember that it should have the query but for debugging purposes I have modified it for always answer the same) ``` function qhocio2() { $data3 = array ('data' => array ( array(a,b,c,d,e,f))); echo json_encode($data3); die(); } > ``` ?>

I would appreciate very much if you could help me in order to troubleshoot this problem. if you need any other info please do not hesitate to ask.

Many thanks in advance

mherni

Problem solved.
I did not know that in rows.add there must be passed the object pointing to data.
This discussion can be closed

Many thanks

allan

Thanks for posting back - great to hear you've got it working now.

Allan