如何在Datatable Server Side处理中加载额外的Javascript？

Question

I am using Datatable.net 1.10, with server processing. It is all good and working fine, but I can't get other javascript to work in the datatable. For example I was using tippy.js to generate nice tooltip in the table. This was working fine with client-side processing but javascript is totally ignored while using server-side processing.

Here is the Javascript I am using for the datatable (shortenened a bit):

function myDataTableAjax_Accident(id, actionURL) {

    var areaDDL = document.getElementById('_AreaDDl');
    var areaID = areaDDL.options[areaDDL.selectedIndex].value;

    var incidentStatusDDL = document.getElementById('_IncidentStatus');
    var incidentStatusID = incidentStatusDDL.options[incidentStatusDDL.selectedIndex].value;

    var incidentKind = document.getElementById('incidentKind').value;

    $('#' + id).DataTable({

        dom: //cut for shortness
        , serverSide: true
        , processing: true
        , pageLength: 100
        , deferRender: true
        , ajax: {
            url: actionURL,
            type: 'POST',
            contentType: "application/json",
            data: function (model) {           
                return JSON.stringify(model);
            },
        },
        columns: [

            { data: null, defaultContent: "" },
            { data: "incident_EHSconnect_ID" },
            {
             data: "accident_type_name", defaultContent: defaultValueTxt
            },

            { data: "incident_category", defaultContent: "" },
            { data: "incident_area_name", defaultContent: "" },
            { data: "location", defaultContent: defaultValueTxt },

            { data: "incident_description", defaultContent: "" },

            {
             data: null,
             defaultContent: "",
             orderable: false,
             render: function (data, type, row, meta) {
                 var btns =
                 '<button id="' + data.incident_ID + '" data-id="' + data.incident_ID + '" class="modalDetails btn btn-default btn-control col-md-6 tip" title="Shows details of the accident" ><span class="glyphicon glyphicon-modal-window "></span> Details</button>' +
                 '<a href="' + webroot + "/EHSConnect_Incident/EditIncident/?incidentID=" + data.incident_ID + '" title="Edit the accident details" class="tip btn btn-primary btn-control col-md-5" style="margin-left:5px;"><span class="glyphicon glyphicon-edit"></span> Edit   </a>' +
                 '<a href="' + webroot + '/EHSConnect_Dashboard/ExportToPdf/?incidentID=' + data.incident_ID + '" title="View in browser as PDF and download"  class="tip btn btn-info btn-control col-md-6"><span class="glyphicon glyphicon-download"></span> PDF</a>'
                 ;
                 if (!data.signed_by_injured_party) {
                     btns += '<a href="' + webroot + '/EHSConnect_Incident/SignAccident/?incidentID=' + data.incident_ID + '" title="Electronically sign accident" class="tip btn btn-warning btn-control col-md-5" style="color:black;margin-left:5px;"><span class="glyphicon glyphicon-pencil"></span> Sign</a>';
                 }

                 return btns;
             }
            },
        ],
        columnDefs: [{
            className: 'control',
            orderable: false,
            targets: 0
        }],
    });
}

And here is the view:

@using AspMvcUtils
@using EHS.Utils


<table  class="table table-bordered tblAccident" style="margin-top: 0px !important; width: 100%;" id="tblAccident">
    <thead class="scrollStyle">
        <tr>
            <th></th>
            <th>ID</th>
            <th>Type</th>
            <th>Category</th>
            <th>Location</th>
            <th>Exact Location</th>
            <th>Description</th>
            <th>Reported by</th>
            <th>Reported Date</th>@*6*@
            <th>Incident status</th>
            <th data-priority="-1" class="col-md-6" style="max-width:150px;">Controls</th>
        </tr>
    </thead>

    @*Rows -------------------------------------------------------------------------------------------------------*@

    <tbody class="scrollStyle">    </tbody>

</table>

<div id="modalContainer" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>

<script>
   tooltip('.tip', 'ehs');

       $(document).ready(function () {
        myDataTableAjax_Accident('tblAccident', '@Url.Action("DatatableServerSideIndex")');
    });
</script>

And here is the tooltip function:

function tooltip(selector, userTheme) {
tippy(selector, {
    theme: userTheme,
    position: 'right',
    animation: 'scale',
    duration: 600
})

}

(I am using ASP.NET MVC4 by the way).

How can I get the extra javascript to work properly in the table?

Answer 1

You have to call tooltip after datatables complete its initialization, you can use fnInitComplete callback to do that:

$(document).ready( function() {

  $('#example').dataTable({

    ...,

    "fnInitComplete": function(oSettings, json) {
      alert( 'DataTables has finished its initialisation.' );
      // call tooltip here
      tooltip('.tip', 'ehs');
    }

  });

});

Because you are using datatables and tooltip in 2 separate functions you can use callbacks to call them in order:

myDataTableAjax_Accident function:

function myDataTableAjax_Accident(id, actionURL, done) {

    ...,

    "fnInitComplete": function(oSettings, json) {

        done();

    }

}

And then in your View you can pass done parameter as a function and then call tooltip like this:

<script>
    $(document).ready(function () {
        myDataTableAjax_Accident('tblAccident', '@Url.Action("DatatableServerSideIndex")', function() {
            tooltip('.tip', 'ehs');
        });
    });
</script>