Populate Custom Caption from Json

KavithaNagarajan

Hello,
How can i populate caption of the table with the hospitallName & Date supplied in the json data?,expected output is attached here

Json :

{
"sEcho":2,
"iTotalRecords":243,
"iTotalDisplayRecords":243,
"aaData":[
[
"Mark Zuckerberg",
"USA",
"Feb 14, 1943"
],
[
"John Mathew",
"UK",
"Feb 14, 1943"
],
[
"John Mathew",
"USA",
"Feb 14, 1943"
]
],
"Date":"Aug 01, 2016 - Aug 05, 2016",
"hospitallName":"Apollo Hospital Center"
}

--

on my server side,i am calling like this,

$(document).ready(function() {  
    oTable = $('#report').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide": true,
        "bProcessing":true,
        "bFilter":true,
         "oLanguage": {
              "sProcessing": "Please wait..."
         },
        "sAjaxSource": "myDataTableAction.action",
        "aaSorting": [],

    });
    $('td.options span').hide();

    $('<caption/>').html('<h2 style="text-align: center;background-color:#f9b660 !important ; line-height: 45px;">Have to show hosital Name & Date here</h2>').appendTo( '#report' );
});

allan

DataTables doesn't currently have an API for the table caption, but you could use initComplete and a little bit of jQuery to insert the caption into the table.

Allan

KavithaNagarajan

Hello allan,
I upgraded to 1.10.12 version,previously i was using 1.9.4,i can able to show heading now,but after upgrading to new version,I am facing issue with refreshing data table after calling ajax request.here is my sample code

$(document).ready(function() {  
        oTable = $('#productivityreportcp').DataTable({
            "jQueryUI": true,
            "pagingType": "full_numbers",
            "serverSide": true,
            "processing":true,
            "searching":true,
             "language": {
                  "processing": "Loading ..."
             },
             "ajax": {
                 type: 'POST',
                  "url": "myDataTableAction.action",
                  "dataSrc": function(json) {
                      console.log("json "+json.reportDate);
                      console.log("json "+json.facilityNames);
                      console.log("json "+json.data);
                    $('#date_head').text(json.reportDate)
                    $('#hospitalName_head').text(json.facilityNames)
                    return json.data
                 },
    
                    "data": function ( d ) {
                        return $.extend( {}, d, {
                            "fromDate": $("#fromDate").val(),
                            "toDate": $("#toDate").val(),
                        } );
                      }
                },
            "order": [[ 0, "desc" ]]
        });
        $('td.options span').hide();
    });

For doing refresh I'm doing this code in JS function

    var otable = $("#productivityreportcp").DataTable();
    otable.draw();

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan