Populate Custom Caption from Json

Populate Custom Caption from Json

KavithaNagarajanKavithaNagarajan Posts: 2Questions: 1Answers: 0

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' );
});

Answers

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    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

  • KavithaNagarajanKavithaNagarajan Posts: 2Questions: 1Answers: 0

    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();
  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    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

This discussion has been closed.