0

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>
  • 2
    Put the initialization inside of the callback of the remote function?? – Eric Nov 18 '15 at 22:36
  • that isn't working either. JavaScript lines up all the remoting events & reaches the point to initialize datatable before there is any data, Plus I would like to implement export to excel feature later. For this to work on entire dataset, datatable need to initialize after entire dataset is loaded. Just need to add a delay if it is possible – user569925 Nov 18 '15 at 22:45
  • you can initialize datatable in the beginning and after that inside your remote function callback after getting data add row dynamically in your datatable. – Himanshu Nov 19 '15 at 3:03
  • I added initialization on call back but still getting same error. I updated it in my question. am I doing it a wrong way? – user569925 Nov 19 '15 at 13:40
1

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

Where is i being defined? Is it possible your table is not rendered before you are trying to initialize it?

I am using datatables populated w/remote action in visualforce page w/o error. Table shell is rendered and initiliazed on load but doesn't get data until user enters a text string and initiates a search.

//Empty table in html

<div class="tab-pane" id="tabs-3">
  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered my-sfdc table-condensed" id="myTable">
    <thead>
      <tr>
        <th>Id</th>
        <apex:repeat value="{!$ObjectType.myCustomObject__c.FieldSets['myFieldSet']}" var="f">
          <th>{!f.Label}</th>
        </apex:repeat>
      </tr>
    </thead>
    <tbody id="myTblBody"></tbody>
  </table>
</div>

// in document.ready init table

jQuery('#myTable').dataTable( {
    "sDom": "<'row'<'span3'l><'span3'T><'span6'f>r>t<'row'<'span3'i><'span3'T><'span6'p>>",
    "sPaginationType": "bootstrap",
    "iDisplayLength": 25,
    "oLanguage": {"sLengthMenu": "_MENU_ records per page"},
    "oTableTools": {"aButtons": ["xls"],
                    "sSwfPath": "{!URLFOR($Resource.TableTools220, 'swf/copy_csv_xls.swf')}"},
    "fnRowCallback":function( nRow, aData, iDisplayIndex ) {
        jQuery.each(myrecs,function(r){
            console.log(myrecs[r]);
            if ( aData[0] == myrecs[r][0]) {jQuery(nRow).addClass( 'myTableClass' );}
        });}
});
  • I have tried adding empty table in div & then populating it using remoting method. this does eliminate above error but datatable when initialized is empty & sorting, paging or any other datatable functionality that comes out of the box doesn't work. how do you get around that? – user569925 Nov 30 '15 at 13:54
  • Sorry for all the posts...having editor problems... Inside the processing of your remote call you maybe need to add some method calls to datatables to reset the table. before adding in teh data call jQuery('#myTable').dataTable().fnClearTable(); and then after the new data is in the table call the following jQuery('#myTable').dataTable().fnAddData(recs); jQuery('#myTable').dataTable().fnSetColumnVis(0,false); jQuery('#myTable').dataTable().fnDraw(); jQuery('#myTable').dataTable().fnAdjustColumnSizing(); – geebs Dec 1 '15 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.