[SalesForce] Jquery Datatable with delay

I'm trying to use JQuery DataTables with Salesforce JavaScript Remoting. Is there a way to delay datatables initialization? I want to do that otherwise datatables think there are no rows in the table. It takes fraction more time for remoting method to retrieve data. I tried using setTimeOut but I'm getting an error:

TypeError: i is undefined

My JavaScript:

<script type="text/javascript">
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
        window.setTimeout(setUpDataTable, 5000);
    });

    function setUpDataTable() {
        j$('#divTable table').DataTable( {

        });
    }
</script>

I even tried initializing datatable on callback:

<head>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
    <apex:includeScript value="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" />
</head>

<script type="text/javascript">
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('#divTable').append('<table />');
        getRemoteData('something', false);
        getRemoteData('something1', false);
        getRemoteData('something2', false);
        getRemoteData('something3', true);
    });
    function getRemoteData(controllerParams, initializeDataTable) {
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.MyController.GetData}',
            controllerParams,
            function(result, event){
            if (event.status) {
                    j$('#divTable table').append('<tr> <td>' + results.Date__c +  '</td> </tr>');
                    if (initializeDataTable)
                    {
                        j$('#divTable table').DataTable( {
                            //to do sorting
                        });
                    }
                } else if (event.type === 'exception') {
                    document.getElementById("responseErrors").innerHTML = 
                        event.message + "<br/>\n<pre>" + event.where + "</pre>";
                } else {
                    document.getElementById("responseErrors").innerHTML = event.message;
                }
            }, 
            {escape: true}
        );
    }
</script>
<section class="">
    <div id="divTable" style="background-color:#ececec"></div>
</section>

Best Answer

I had faced this same issue yesterday and the solution that has worked for me is to add the jQuery DataTable code inside setTimeout function. The code that has worked for me is:

$(document).ready(function(){
    /* Apply jQuery DataTable */
    setTimeout(function(){
        var mytable = $('#tableID').DataTable({ 
                        order : [1, 'desc'],
                        iDisplayLength : 10,
                        aLengthMenu : [10,20,50,100],
                        "columnDefs": [{
                            "targets": [0,5,7],
                            "orderable": false
                        }]
         });
    }, 1000);                        
});
Related Topic