Question

我正在尝试为Datatables可扩展行框架上的每一列设置编辑按钮。

如何通过单击DataTables中的每个列按钮获取列值？当我点击按钮时，我获取数据1并且数据[2]值未定义。谁能告诉我我做错了什么？请参阅附带的图片和摘要。

  <script>
    $(document).ready(function () {

            var table = $('#example').DataTable({
                "ajax": "user.json",

                "columns": [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {"data": "Name"},
                    {"data": "Phone"},
                    {"data": "Role"},
                    {
                        "targets": -1,
                        "data": null,
                        "defaultContent": "<button>Edit</button>"
                    }
                ],
                "order": [[1, 'asc']]
            });
            $('#example tbody').on('click', 'button', function () {
                var data = table.row($(this).parents('tr')).data();
                alert(data[1] + "'s Phone is: " + data[2]);
            });

            // Add event listener for opening and closing details
            $('#example tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        });

    </script>

    <html>
    <table id="example" class="display" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th></th>
                        </tr>
                        </tfoot>
                    </table>
    </html>

Answer 1

您需要使用Object.keys

此外，我建议你使用.closest功能，因为你需要返回第一场比赛。

 $('#example tbody').on('click', 'button', function () {
       var data = table.row($(this).closest('tr')).data();
       alert(data[Object.keys(data)[0]]+' s phone: '+data[Object.keys(data)[1]]);
 });

如何通过单击DataTables中的每个列按钮获取列值？

1 个答案: