我正在使用 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 =
'<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
}],
});
}
这是 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>
这是工具提示功能:
function tooltip(selector, userTheme) {
tippy(selector, {
theme: userTheme,
position: 'right',
animation: 'scale',
duration: 600
})
}
(顺便说一句,我正在使用 ASP.NET MVC4)。
如何让额外的 javascript 在表格中正常工作?
最佳答案
数据表完成初始化后必须调用tooltip,可以使用fnInitComplete回调来执行此操作:
$(document).ready( function() {
$('#example').dataTable({
...,
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation.' );
// call tooltip here
tooltip('.tip', 'ehs');
}
});
});
因为您在两个单独的函数中使用数据表和工具提示,所以您可以使用回调按顺序调用它们:
myDataTableAjax_Accident 函数:
function myDataTableAjax_Accident(id, actionURL, done) {
...,
"fnInitComplete": function(oSettings, json) {
done();
}
}
然后在 View 中,您可以将 done
参数作为函数传递,然后像这样调用工具提示:
<script>
$(document).ready(function () {
myDataTableAjax_Accident('tblAccident', '@Url.Action("DatatableServerSideIndex")', function() {
tooltip('.tip', 'ehs');
});
});
</script>
关于javascript - 如何在数据表服务器端处理中加载额外的Javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47156089/