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

我已经在我的一个项目中实现了响应jquerydatatable。 每行末尾都有“编辑/详细信息”链接

如果单击“编辑/详细信息”链接：

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

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

大屏幕编辑/详细信息是最后一行

单击编辑链接后的大屏幕

小屏幕查看被拆分的编辑/详细信息链接

每当屏幕变小时，单击“编辑链接”时，我无法获得用户ID警报。

我的密码

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

检查大屏幕中的元件

检查小屏幕中的元件：

---

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

您可以通过

table.row（）.data（）

获取特定行的所有值：

$（'myExample'）。在（'click'，'a.Edit'，函数（e）上{
var data=table.row（$（this）.closest（'tr'））.data（）
//如果是“用户名”/您要查找的第一列
var userId=data[0]
...
})

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

您可以通过

table.row（）.data（）

获取特定行的所有值：

$（'myExample'）。在（'click'，'a.Edit'，函数（e）上{
var data=table.row（$（this）.closest（'tr'））.data（）
//如果是“用户名”/您要查找的第一列
var userId=data[0]
...
})

我不知道我的代码中缺少什么。我也试过使用这个代码。。请建议meIf i do var data=table.row（0）.data（）。然后它将获得第一行数据。但是，当table.row（$（this.nexist（'tr'））.data（）时，它不会获取索引，但是您做了一些错误的事情。。。！制作了一个小提琴，演示了上面的->调整表格大小，使列隐藏，然后单击链接。它使用了一个

标签和一个

.Edit

，就像在你的操作中一样。我只能猜测为什么它对你不起作用，你提供的代码不是非常有用；您自己在粘贴的代码中没有使用

responsive

（？），其余的看起来像是一系列尝试和错误-您确定您使用的代码是正确的吗…？嗨，davidkonrad，当锚定标记处于第一个克隆时，当屏幕很小时，它似乎工作正常。但是，当特定的锚标记是最后一列时，它不起作用。我还在Jsfiddle中测试了您的代码，我在Jsfiddle中的Salary列之后添加了代码，并尝试单击该锚标记，然后什么都没有发生。我不知道我的代码中缺少了什么。我也试过使用这个代码。。请建议meIf i do var data=table.row（0）.data（）。然后它将获得第一行数据。但是，当table.row（$（this.nexist（'tr'））.data（）时，它不会获取索引，但是您做了一些错误的事情。。。！制作了一个小提琴，演示了上面的->调整表格大小，使列隐藏，然后单击链接。它使用了一个

标签和一个

.Edit

，就像在你的操作中一样。我只能猜测为什么它对你不起作用，你提供的代码不是非常有用；您自己在粘贴的代码中没有使用

responsive

（？），其余的看起来像是一系列尝试和错误-您确定您使用的代码是正确的吗…？嗨，davidkonrad，当锚定标记处于第一个克隆时，当屏幕很小时，它似乎工作正常。但是，当特定的锚标记是最后一列时，它不起作用。我还在Jsfiddle中测试了您的代码，在Jsfiddle中的Salary列之后添加了Jsfiddle，并尝试单击该锚定标记，然后什么也没有发生

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