My table loads twice: once full, and then with paging.

yizhar

I'm using wordpress and here is my page: http://torhazahav.org/Heathrow/

Thanks in advance.

yizhar

Title of the question has been corrupted, I've meant the table is loaded once with full length and later on with paging display.

I want it to be displayed once - with paging display only.

kaiaeberli

I think it could be because you use html as the source of the datatable. It first makes the HTML table, and then applies the datatable styling/paging to it. Try making an ajax request instead and retrieve your data as a json string.

yizhar

Thanks kaiaeberli, actually I thought it might be the reason and try it but couldn't make it work through Ajax.

If you could please point me to an example how to make ajax request and retrieve data as JSON with WordPress, cause the examples in the dataTables weren't clear to me (https://datatables.net/reference/option/ajax).

Thanks again!

kaiaeberli

below the code - it would require jquery to be imported

kaiaeberli

function createDatatable(idTable, jsonData) {

    var table = null;
    
 
     
         table = $('#' + idTable).DataTable({
            columns: jsonData[0].columns,
            data: jsonData[0].data,      
            "columnDefs": [
                          
             {
                "targets": "_all",          
                "render": {
                    "_": "data",
                    "display": "display" // pickup display key from json map
                }
            }

                ]
        });

    return table;
}

jQuery.extend({ // AJAX function for GET and POST

    getValues: function(url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            async: false,
            success: function(data) {
                result = data;
            }
        });
       return result;
    }, 


    getValuesPOST: function(url, requestData) {
        var result = null;

        
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {postData: JSON.stringify(requestData)} ,           
            async: false,
            success: function(data) {
                result = data;
            }
        });
       return result;
    }
    
});

// build HTML
$('#div_mytable').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable"></table>' );

//using GET
jsonResponseGET = $.getValues("localhost:8000/getMyJSON?
param1=test1");


//using POST
postData = [];   
postMap = {};
postMap["param1"] = "test1";
jsonResponsePOST = $.getValuesPOST("localhost:8000/getMyJSON", postMap)
    
// create DataTable object and attach to DOM
var dtMytable = createDatatable("myTable", jsonResponseGET);

// json string format example
var jsonResponseGET =
 
[
{
"data":
    [
        {
            "header1": {"data": "abcde", "display": "abcde"}           
            , "header2": {"data": 0.0014466352336048006, "display": "0.0014"}
        }
         
        ,
         
        {
            "header1": {"data": "abcde", "display": "abcde"}           
            , "header2": {"data": 0.0014466352336048006, "display": "0.0014"}
        }
         
         
         
    ]
 
, "columns":
    [
        {"data": "header1", "title": "header1"}
        , {"data": "header2", "title": "header2"}      
    ]
}
]

yizhar

Thanks man!

yizhar

Hey man, if you know a little Wordpress and can tell me where goes each code piece, that would help...

I assume some of these should go to functions.php, as an HTML header fragment, and other should go to the page body and the server...

kaiaeberli

Unfortunately I am not familiar with Wordpress. Normally you can put everything in a script tag in the html page body, and make the server return correctly formatted json upon request.

yizhar

Thanks again!

yizhar

I've tried you code my friend, got lost a little (learned Ajax thanks to you now.. :) ), and then I went back to dataTables Ajax example - surprisingly everything works now, I've probably made a stupid mistake before.

Now I've wonder - if their example includes 4 lines of code, why do I need all your code? It gives you better resolution/control for working with the data?

Here is the dataTables example which works for me as is:

$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/arrays.txt"
} );
} );

kaiaeberli

Yes exactly: it gives you more granular control over the result, as well as making table creation more generic.

For example, imagine you have a SQL query where you define column names. My code would pickup those names from the json response to build the table, whereas in the ajax example from datatables they are defined in the html or table definition (so instead of one place i'd have to define columns in two places, and keep those in sync).

Second, my code allows you to format data for display (for example in lower precision), while at the same time keeping the original data intact to use for something else (export to excel for example, or sorting).

However, I agree that for the POST and GET requests, you could use the ajax option directly (in fact it seems to take exactly the same parameters as the jquery version), if you are happy to specify your column names manually in the table definition.

yizhar

Thanks, clear now.