Jquery Datatables How to get column Id in render function

Question

I'm trying to create a reference into the row cell. This is my code:

<table class="table table-striped table-bordered table-hover little_margin_table" id="data-table" width="100%">
                        <thead>
                        <th>First Name</th>
                        <th>Email</th>
                        <th>Password</th>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.Items)
                            {
                                <tr id="@item.Id">
                                    <td>@item.FirstName</td>
                                    <td>@item.Email</td>
                                    <td>@item.Password</td>
                                </tr>
                            }
                        </tbody>
                    </table>

Javascript code:

 $(document).ready(function () {
        $('#data-table').dataTable({

            bFilter: false,
            aoColumnDefs: [
              {
                  bSortable: false,
                  aTargets: [1, 2],

              },
            {

                "targets": 0,
                "render": function (data, type, full, meta) {
                    return '<a href = "@(Url.Action("IndexPage", "Company"))/' + ROWID '</a>';
                }
            },
            ]
            })

Here I am assuming the row Id :

<tr id="@item.Id">

How can get it to into the function render:

"render": function (data, type, full, meta) {
                        return '<a href = "@(Url.Action("IndexPage", "Company"))/' + ROWID '</a>';

Help, please.

Answer 1

You could add a extra column to your table:

<td>@item.FirstName</td>
<td>@item.Email</td>
<td>@item.Password</td>
<td>@item.Id</td>

Which is set to hidden in the datatables init code:

'bVisible': false

When you use render you can now get the Id value from full:

"render": function (data, type, full, meta) {
         return '<a href = "@(Url.Action("IndexPage", "Company"))/' + full[3] + '</a>';

Answer 2

You could use a delegated event handler to add the id to the link when it is clicked :

$("#data-table").on("click", "td:eq(0) a", function(e) {
   this.href+=$(this).closest('tr').attr('id');
})

And forget about adding ROWID to the href in the render callback. The table is generated serverside and your Model.items is never passed to the client as data, so I cannot see any other workaround.