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>

}

Answer 1

解决方案是使用以下paramas初始化dataTable（）

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

jquery使用datatables插件

1 个答案: