Question

I am using the awesome datatables jquery plugin, but I am having some issues with the rendering of the table.

I have the following code:

$(document).ready(function() {
var jsonEmp="";
$.getJSON("../lib/violation_select_emp.php", function(json) {
    jsonEmp = json;
}); 

var oTable;
oTable = $('#uview').dataTable({
    "bStateSave":true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../lib/server_processing_emp_list.php",
    "sPaginationType": "four_button",
    "aaSorting": [[ 0, "asc" ]],
    "aoColumns": [
    {
        "fnRender": function ( oObj ) {
         var empID=oObj.aData[4];
         var empName=oObj.aData[5];
         return "<a href='viewEmployer.php?empID="+empID+"'>"+empName+"</a>";
    }
    },
    {
        "fnRender": function ( oObj ) {
            var numAlerts=jsonEmp.length;
            var i=0;
            var alerts=0;
            while(i<numAlerts){
            if(jsonEmp[i]==oObj.aData[3]){
                alerts++;
            }
            i++;
    }
    return alerts;
    }
});
});

When I load the page, nothing shows up in the column with the fnrender, but when I hit the next paginition button, and then hit the previous pagination button, I see the information that I am looking to see.

My theory is that the table needs to be refreshed, but when I do that it results in the same thing happening.

Not sure what to do, hopefully someone can help me out.

Answer 1

You have a callback function for $.getJSON. In the callback function you assign a value to your jsonEmp variable which was initialized with “”. Your code doesn’t wait for a response from the website where you are sending a request, your Javascript code below $.getJSON won’t wait for the page to respond, leading to the bug of using jsonEmp before you assigned a real-life value to it.

Suggestion:

$(document).ready(function() {
var jsonEmp="";
var oTable;
$.getJSON("../lib/violation_select_emp.php", function(json) {
    jsonEmp = json;
oTable = $('#uview').dataTable({
    "bStateSave":true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../lib/server_processing_emp_list.php",
    "sPaginationType": "four_button",
    "aaSorting": [[ 0, "asc" ]],
    "aoColumns": [
    {
        "fnRender": function ( oObj ) {
         var empID=oObj.aData[4];
         var empName=oObj.aData[5];
         return "<a href='viewEmployer.php?empID="+empID+"'>"+empName+"</a>";
    }
    },
    {
        "fnRender": function ( oObj ) {
            var numAlerts=jsonEmp.length;
            var i=0;
            var alerts=0;
            while(i<numAlerts){
            if(jsonEmp[i]==oObj.aData[3]){
                alerts++;
            }
            i++;
    }
    return alerts;
    }
});
}); 

});

As you can see, I’ve put the initialization of your object into the callback function, I still believe your problem comes from initialization, but I didn’t test the code. Let me know of the results of my suggestion.

Good luck!