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

我正在使用Datatable.net 1.10，服务器处理。 这一切都很好，工作正常，但我不能让其他javascript在数据表中工作。 例如，我使用tippy.js在表中生成了很好的工具提示。 这在客户端处理时运行良好，但在使用服务器端处理时完全忽略了javascript。

这是我用于数据表的Javascript（缩短了一点）：

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 = ' Details' + ' Edit ' + ' PDF' ; if (!data.signed_by_injured_party) { btns += ' Sign'; } return btns; } }, ], columnDefs: [{ className: 'control', orderable: false, targets: 0 }], }); } 

以下是观点：

 @using AspMvcUtils @using EHS.Utils @*6*@  @*Rows -------------------------------------------------------------------------------------------------------*@ 
 
 
 
 
ID
 
Type
 
Category
 
Location
 
Exact Location
 
Description
 
Reported by
 
Reported Date
Incident status
 
Controls
 
 
 
 
 
  tooltip('.tip', 'ehs'); $(document).ready(function () { myDataTableAjax_Accident('tblAccident', '@Url.Action("DatatableServerSideIndex")'); });  

这是工具提示function：

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

}

（顺便说一句，我使用的是ASP.NET MVC4）。

如何让额外的javascript在表格中正常工作？

Answer 1

您必须在数据表完成初始化后调用工具提示，您可以使用fnInitComplete回调来执行此操作：

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

因为您在2个单独的函数中使用数据表和工具提示，所以您可以使用回调按顺序调用它们：

myDataTableAjax_Accident函数：

 function myDataTableAjax_Accident(id, actionURL, done) { ..., "fnInitComplete": function(oSettings, json) { done(); } } 

然后在您的视图中，您可以将done参数作为函数传递，然后调用工具提示，如下所示：