Question

我在我的一个项目中实现了响应式jquery数据表。在每行的末尾都有编辑/详细信息链接。

如果我点击编辑/详细信息链接：

1）大屏幕 - 它选择UseID（连续第一列），以便我可以编辑该用户。

2）小屏幕 - 由于响应性，行将分裂如下所示。它不会选择该用户ID。

大屏幕编辑/明细是最后一行

点击修改链接后的大屏幕

小屏幕请参阅分割的编辑/明细链接

当屏幕较小时，点击编辑链接后，我无法收到UserID警告。

我的代码。

  <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>

获取UserID：

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

在大屏幕中检查元素

在小屏幕中检查元素：

Answer 1

您必须通过dataTables API才能获取DOM中不存在的列的数据（由于响应性而被删除）。

您可以按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]
  ...
})

如何在小屏幕的响应式jquery数据表中获取特定列

1 个答案: