jquery using datatables plugin

Question

I am using jquery datatables plugin for my MVC app, Datatables has provided an example on "DataTables hidden row details example" which i would like to use in my table. I have a problem that my parent table contains some actionlinks which i want hidden, I want to show these links in the hidden row and cannot see a solution to do this. here is example provided 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>

}

there is no error. I want the action links from parent table hidden but showing in child table, the hidden row. — Jed I
– Jed I, Commented Aug 6, 2013 at 9:57

Jed I · Accepted Answer · 2013-08-06 10:12:00Z

1

solution was to initialize dataTable() with following paramas

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

answered Aug 6, 2013 at 10:12

Jed I

1,0383 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery using datatables plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related