如何在数据表服务器端处理中加载额外的 Javascript？

Question

我正在使用带有服务器处理的 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
        }],
    });
}

这是视图：

@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 在表格中正常工作？

Answer 1

你必须在数据表完成初始化后调用tooltip，你可以使用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 参数作为函数传递，然后像这样调用工具提示：

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