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>
Improve this question
4
  • 2
    Put the initialization inside of the callback of the remote function??
    – Eric
    Nov 18, 2015 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, 2015 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, 2015 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, 2015 at 13:40

2 Answers 2

Reset to default
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);                        
});
Improve this answer
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' );}
        });}
});
Improve this answer
2
  • 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, 2015 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, 2015 at 21:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .