How to get particular column in responsive jquery datatable for small Screen

Question

I have implemented responsive jquery datatable in one of my project. At the end of each row there is edit/detail link.

If i click edit/detail link:

1) Large Screen - It picks the UseID(Which is first Column in a row), so that i can edit that User.

2) Small Screen - Because of responsiveness the row will splitted as show below. It doesnot pick that User ID.

Large Screen Edit/Detail is Last row

Large Screen after clicking Edit link

Small Screen See Edit/detail link which is splitted

I am not able to get the UserID alert when i click edit link whenever the screen is small.

My Code.

  <table id="myExample" class="display responsive nowrap">
    <thead>
      <tr>
        <th>User Name</th>
        <th>First Name</th>
        <th>LastName</th>
        <th>Street</th>
        <th>City</th>
        <th>Zip</th>
         <th>State</th>
        <th>Email</th>
         <th>Edit</th>
       </tr>
</thead>
</table>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.responsive.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function () {
                var table = $('#myExample').DataTable({
                     "ajax": {
                        "url": "/Admin/LoadData",
                        "type": "GET",
                        "datatype": "json"

                    },
                    "columns": [

                        { "data": "Usr_Nm", "autowidth": true },
                        { "data": "FirstName", "autowidth": true },
                        { "data": "LastName", "autowidth": true },
                        { "data": "Street", "autowidth": true },
                        { "data": "City", "autowidth": true },
                        { "data": "Zip", "autowidth": true },
                        { "data": "Sate", "autowidth": true },


                        {
                            data: null,
                            defaultContent: '<a href="#" class="Edit">Edit</a>/<a href="#" class="Detail">Detail</a>',
                            orderable: false
                        }
                    ]


                });


            $('#myExample').on('click', 'a.Edit', function (e) {


                var UserId = $(this).closest('tr.').find('td').find('.sorting_1').text();


                $.ajax({
                    url: '/Admin/UserEdit',
                    type: "GET",
                    data: { 'id': UserId },
                    dataType: "json",
                    success: function (response) {
                        // alert('1:');
                        // alert(response);
                        if (response.isRedirect) {
                            // alert('1');
                            window.location.href = response.redirectUrl;
                            //window.location.href = response.redirectUrl;
                        }
                        // }
                    },
                    error: function (response) {
                        alert("Some error");
                    }
                });

            });
     })
    </script>

To get UserID:

 var UserId = $(this).closest('tr.').find('td').find('.sorting_1').text();

Inspect Element in Large Screen

Inspect Element in Small Screen:

Answer 1

You must go through the dataTables API in order to get data for columns not present in the DOM (removed due to responsiveness).

You can get the all values for a certain row by table.row(<tr-node>).data() :

$('#myExample').on('click', 'a.Edit', function (e) {
  var data = table.row($(this).closest('tr')).data()
  //if it is "User Name" / first column you are after
  var userId = data[0]
  ...
})