Sadequer Rahman Sadequer Rahman - 5 days ago 5
Javascript Question

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

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.

enter image description here

<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
 var data = table.row($(this).parents('tr')).data();

if you do a console log on data

 console.log(data);

This will return an object attached with this Row. You will have to retrieve the details by traversing the object like below

    $(document).ready(function () {
      
      
    var data = [
        {
          Name:"Tiger Nixon",
          Phone:"1234567",
          Role:"SE"
        },

        {
          Name:"Tiger Wood",
          Phone:"12345678",
          Role:"SP"
        }

        ]

            var table = $('#example').DataTable({
                "data": data,

                "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.Name + "'s Phone is: " + data.Phone);
            });

            // 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');
                }
            });
        });
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

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

Comments