jquery使用數據表插件

我正在使用jQuery數據表插件爲我的MVC應用程序，Datatables提供了一個示例，我想在我的表中使用「DataTables hidden row details example」。我有一個問題，我的父表包含一些我想要隱藏的動作鏈接，我想在隱藏行中顯示這些鏈接，並且無法看到解決方案來執行此操作。這裏例如提供https://datatables.net/release-datatables/examples/api/row_details.html jquery使用數據表插件

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

}

來源

2013-08-06 Jed I

什麼是你得到 –

錯誤有沒有初始化的dataTable（）錯誤。我想隱藏父表的行爲鏈接，但在子表中顯示隱藏行。 –

子表在哪裏？ – Kuzgun

的解決辦法是用以下paramas

var oTable = $('#customerIndex').dataTable({ 
     "aoColumnDefs": [ 
      { "bVisible": false, "aTargets": [2] }, 
      { "bVisible": false, "aTargets": [3] } 
     ]

來源

2013-08-06 10:12:00

jquery使用數據表插件

回答

相關問題