如何在Datatable Server Side处理中加载额外的Javascript? [英] How to load extra Javascript in Datatable Server Side processing?
问题描述
我正在使用Datatable.net 1.10，并进行服务器处理.一切都很好并且工作正常，但是我无法在数据表中使用其他JavaScript.例如，我正在使用tippy.js在表中生成漂亮的工具提示.这在客户端处理中工作正常，但是在使用服务器端处理时完全忽略了javascript.
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.
以下是我用于数据表的Javascript(略了一点):
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
}],
});
}
这是视图:
@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>
这是工具提示功能:
function tooltip(selector, userTheme) {
tippy(selector, {
theme: userTheme,
position: 'right',
animation: 'scale',
duration: 600
})
}
(顺便说一下，我正在使用ASP.NET MVC4).
(I am using ASP.NET MVC4 by the way).
如何在表格中获取额外的javascript以使其正常工作?
How can I get the extra javascript to work properly in the table?
推荐答案
在数据表完成初始化后，您必须调用工具提示，可以使用 fnInitComplete 回调可以做到这一点:
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');
}
});
});
由于要在2个单独的函数中使用数据表和工具提示，因此可以使用回调依次调用它们:
Because you are using datatables and tooltip in 2 separate functions you can use callbacks to call them in order:
myDataTableAjax_Accident函数:
function myDataTableAjax_Accident(id, actionURL, done) {
...,
"fnInitComplete": function(oSettings, json) {
done();
}
}
然后在视图中，您可以将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>
这篇关于如何在Datatable Server Side处理中加载额外的Javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
