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使用数据表插件

回答

相关问题