单击相应按钮时获取数据表中的 ID答案

【问题标题】：Get ID in datatables when the corresponding button is clicked单击相应按钮时获取数据表中的 ID
【发布时间】：2015-09-26 19:15:11
【问题描述】：

我正在使用 Datatables 和 Jquery 来构建我的应用程序。我正在从我的服务器将数据提取到表中。该表有 3 列，每列代表 consignmentID、ConsignmentName 和一个“添加”按钮。我想检索单击的相应添加按钮的 consigmentID。

var oTable = $('#viewAllConsignments').DataTable( {
                "aaSorting": [ ], // Prevent initial sorting
                "sAjaxSource": "getConsignment",
                "sAjaxDataProp": "",
                "sServerMethod" : "POST",
                "bProcessing": true,
                 "aoColumns": [
                        { "mData": "consignment.consignmentId"},
                        { "mData": "consignment.consignmentName" },
                        { "mData": "consignment.consignmentId",
                          "bSortable": false, 
                          "mRender": function(data, type, full) {
                                    return '<button type="button" id="btn-packets" class="btn btn-success btn-packets">Add</button>';
                            }
                        }
                ]


        });

【问题讨论】：

在构建数据时为每一行添加 data-consignmentId="database value" 到您的按钮，然后单击按钮执行以下操作：

标签： jquery datatables

【解决方案1】：

永远不要使用重复的 id's - id="btn-packets" - 你可以使用 .btn-packets 类。

为什么不将consignment.consignmentId (==data) 存储为按钮本身的数据属性？

...
mRender: function(data, type, full) {
   return '<button data-consignmentId="'+data+'" class="btn btn-success btn-packets">Add</button>';
}
...

点击：

$('#viewAllConsignments').on('click', '.btn-packets', function() {
    alert($(this).data('consignmentid'));
})

好老的attr()也可以使用：

return '<button consignmentId="'+data+'" class="btn btn-success btn-packets">Add</button>';
alert($(this).attr('consignmentId'));

将该行的整个 JSON 保存为 data ：

return "<button data-row='"+JSON.stringify(full)+"' class='btn btn-success btn-packets'>Add</button>";

请注意，我已经交换了 ' 和 " 的用法。 stringify 使用 " 返回一个字符串。

现在data('row') 包含您可以立即在点击处理程序中访问的整个对象。即使数据以字符串形式插入，它也会返回有效的 JSON：

alert($(this).data('row').consignment.consignmentName);

如果我们可以在没有stringify() 的情况下分配数据会更容易； data() 意味着能够容纳对象 - 但是像 $(result).data('row', full) 这样的东西将不起作用，因为在从 mRender 返回时，呈现的按钮不是 DOM 的一部分，它只是一个普通字符串。

【讨论】：

嘿，我试过这样做，但我总是在警告框中得到“未定义”。
我检查了每个按钮，他们将 data-consignmentId 设置为相应的 consignment.consignmentId。但是警报框仍然显示未定义。 :-(
@vkm - 哦，是的，jQuery 在内部将 data-attr 小写，尝试alert($(this).data('consignmentid')) 做了这个小例子 -> jsfiddle.net/yk9fady5 演示了这个问题。一个“有效的”HTML5 数据属性是data-consignment-id，但这会更加令人困惑。我认为 jQuery 这样做很烦人。如果您根本无法使用attr，请改用consignmentId="'+data+'" 和alert($(this).attr('consignmentId')) - 我建议data-attributes 只是为了符合HTML5，但谁真的在乎:)
该死！我自己可能永远也想不通。太感谢了！像魅力一样工作。
嘿，大卫，再问一次我的知识。如果我想在按钮单击时传递多个数据怎么办，例如 ConsignmentName、ConsignmentId。

【解决方案2】：

试试这样：Add DATA Attribute to the ADD button.

在构建数据时为每一行添加 data-consignmentId="database value" 到您的按钮，然后单击按钮执行此操作：$(this).data(consignmentId);//required id

【讨论】：

嘿，我试过这样做，但我总是在警告框中得到“未定义”。