jquery - データテーブルプラグインを使用したjquery

Question

MVC アプリに jquery datatables プラグインを使用しています。Datatables は、テーブルで使用したい「DataTables 非表示の行の詳細の例」の例を提供しています。親テーブルに非表示にしたいアクションリンクが含まれているという問題があります。これらのリンクを非表示の行に表示したいのですが、これを行うための解決策が表示されません。ここに提供された例があります https://datatables.net/release-datatables/examples/api/row_details.html

         @model Models.customer>


<script type="text/javascript">
$(document).ready(function ()
{
    var nCloneTh = document.createElement('th');
    var nCloneTd = document.createElement('td');
    nCloneTd.innerHTML = '<img src="../Content/Images/details_open.png">';
    nCloneTd.className = "center";

    $('#customerIndex thead tr').each(function () {
        this.insertBefore(nCloneTh, this.childNodes[0]);
    });

    $('#customerIndex tbody tr').each(function () {
        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
    });


    var oTable = $('#customerIndex').dataTable();


    $('#customerIndex tbody td img').on('click', function () {

        var nTr = $(this).parents('tr')[0];
        if (oTable.fnIsOpen(nTr)) {
            /* This row is already open - close it */
            this.src = "../Content/Images/details_open.png";
            oTable.fnClose(nTr);
        }
        else {
            /* Open this row */
            this.src = "../Content/Images/details_close.png";
            oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
        }
    });




});

function fnFormatDetails(oTable, nTr) {
    var aData = oTable.fnGetData(nTr);
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding- left:50px;">';
    sOut += '   <tr><td>Company:</td><td>' + aData[1] + '      ' + aData[3] + '</td> </tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td> </tr>';
    sOut += '</table>';
    return sOut;
}


 </script>
 @{
    ViewBag.Title = "Index";
 }

    <h2>Customers</h2>

 <p>
    @Html.ActionLink("Create New", "Create", null, new { @class = "createButton" })
 </p>


 <table id="customerIndex" class="display">
<thead>
 <tr>
    <th>
       <b>@Html.DisplayNameFor(model => model.name) </b>          
    </th>

    <th>
       <b>@Html.DisplayNameFor(model => model.vehtotal)</b>

    </th>

    <th>

    </th>

    <th>
        Vehicles 
    </th>


 </tr>
 </thead>
  <tbody>
  @foreach (var item in Model)
  {

  <tr>
    <td>
       <b>@Html.DisplayFor(modelItem => item.name)</b> 
    </td>

    <td>
        <b>@Html.DisplayFor(modelItem => item.vehtotal)</b>
    </td>

    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.id }, new { @class =   "custControls" }) 
        @Html.ActionLink("Details", "Details", new { id = item.id }, new { @class = "custControls" }) 
        @Html.ActionLink("Delete", "Delete", new { id = item.id }, new { @class = "custControls" })
    </td>
     <td>
        @Html.ActionLink("View", "Index", "Vehicle", new { custCode = item.code, conName = ViewBag.CurrentConnection }, new { @class = "custControls" }) 
    </td>

</tr>

}