Datatableサーバーのサイド処理で余分なJavascriptを読み込む方法は？

Question

私はDatatable.net 1.10を使用しており、サーバーの処理をしています。それはすべて良いと正常に動作しますが、私はdatatableで動作する他のJavaScriptを取得することはできません。たとえば、私はtippy.jsを使って表に素晴らしいツールチップを生成していました。これはクライアント側の処理でうまくいきましたが、サーバー側の処理を使用している間はjavascriptは完全に無視されます。ツールチップ機能れ、ここで

@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> 

そして：

ここで私はDataTableのために使用していますJavascriptを（shortenenedビット）である：

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 
     }], 
    }); 
} 

そして、ここの図であります

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

（私は途中でASP.NET MVC4を使用しています）。

余分なJavaScriptをテーブルで正しく動作させるにはどうすればよいですか？

Answer 1

あなたはDataTableのは、その初期化を完了した後にツールチップを呼び出す必要があり、あなたがそれを行うためにfnInitCompleteコールバックを使用することができます。

$(document).ready(function() { 

    $('#example').dataTable({ 

    ..., 

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

    }); 

}); 

あなたがそれらを呼び出すためのコールバックを使用することができます2つの別々の機能でのDataTableとツールチップを使用しているためオーダー：

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>