Question

我使用Datatables和Jquery来构建我的应用程序。我从我的服务器将数据提取到表中。该表有3列，每列代表consignmentID，ConsignmentName和一个按钮＆＃34; Add＆＃34;。我想检索单击的相应“添加”按钮的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>';
                            }
                        }
                ]


        });

Answer 1

不要使用重复的id - 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>';
}
...

onclick：

$('#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的一部分，它是只是一个纯字符串。

Answer 2

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

构建数据时每行

将data-consignmentId="database value"添加到按钮，然后点击按钮执行以下操作：$(this).data(consignmentId);//required id

单击相应按钮时，在数据表中获取ID

2 个答案: