How to get column value with click of each column button in DataTables?

Question

I am trying to set edit button for each column on Datatables expandable row framework.

How to get column value with click of each column button in DataTables? When I click a button I'm getting data1 and data[2] value undefined. Can anyone tell me where I am doing wrong? Please refer to the image and snippet included.

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

@Hoang Thanks for your comments. After <script> That's all HTML code referring to this code. — Sadequer Rahman
– Sadequer Rahman, Commented Nov 30, 2016 at 17:30

Mihai Alexandru-Ionut · Accepted Answer · 2016-11-30 18:29:16Z

6

You need to use Object.keys

Further more, I recommend you to use .closest function, because you need to return the first match.

 $('#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]]);
 });

edited Nov 30, 2016 at 18:29

answered Nov 30, 2016 at 17:29

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sadequer Rahman Over a year ago

Thanks for your reply. I tried .closest('tr') doesn't work.

Collectives™ on Stack Overflow

How to get column value with click of each column button in DataTables?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related