How do get data of a row DataTables?

Question

I started with DataTable https://www.datatables.net/. I use lasted DataTable.I can load data from JSON string via ajax to DataTable.And now i want get data when click in a row .As you see DataTable debugger at http://debug.datatables.net/idihol this is my page test.aspx

<table id="div_table" class="display cell-border compact" width="100%">
            <thead>
                <tr>
                    <td>No</td>
                    <td>Name</td>
                    <td>Des</td>
                    <td>LID</td>
                    <td>AID</td>
                    <td>DATE</td>
                    <td>BY</td>
                </tr>
            </thead>
        </table>

And this is my script

var table = $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/LIST_LOCATION",
                    dataSrc: function (json) {
                        return $.parseJSON(json.d);
                    },
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                },
                "aoColumns": [  //// 7 columns as Datatable
                    { "mData": null, "aTargets": [0], "sType": "integer", "bSearchable": false, "orderable": false },
                    { "mData": "LOCATION_NAME", "aTargets": [1], "sType": "string" },
                    { "mData": "LOCATION_DES", "aTargets": [2], "sType": "string" },
                    { "mData": "LOCATION_ID", "aTargets": [3], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                    { "mData": "AREA_ID", "aTargets": [4], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                    { "mData": "EDIT_DATE", "aTargets": [5], "sType": "date", "bVisible": false, "bSearchable": false, "orderable": false },
                    { "mData": "EDIT_BY", "aTargets": [6], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false }
                ],
                "order": [[1, 'asc']]
            }); 
            //table.columns([3, 4, 5, 6]).visible(false);           //// disable column 4,5,6,7
            //// create index column 1
            table.on('order.dt search.dt', function () {
                table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
 $('#div_table tbody').on('click', 'tr', function () {    // get full data or some columns at row selected
                $(this).toggleClass('selected');
                var data_ = table.row($(this)).data();
                alert(data_[3] + " and " + data_[4]);
                /// alert(table.row($(this)).data()); error it show info "object object"
            });

After run it , i get error "undefined and undefined" Can you tell me about problem and give me advice .Thank.

did you import the jQuery? Im having "$ is not defined" when I tried to run your code. — Alvin Magalona
– Alvin Magalona, Commented Apr 10, 2015 at 2:46
==" code his posted is partition from full code, you can't run if don't have full code, — HoangHieu
– HoangHieu, Commented Apr 10, 2015 at 2:55
@Headshot are you sure $('#div_table tbody').on('click', 'tr', function() is worked ?? — HoangHieu
– HoangHieu, Commented Apr 10, 2015 at 2:56
Dear HoangHieu. I confirm it worked . As you see , when i click a row , it is tooggle class (change color in that row) . But i can not get data of row . Thank you. — Headshot
– Headshot, Commented Apr 10, 2015 at 4:04
Can you tell me about problem and five me some advice . Thank you — Headshot
– Headshot, Commented Apr 10, 2015 at 15:44

Gyrocode.com · Accepted Answer · 2015-05-29 12:03:48Z

4

The problem is that your JSON data is an array of objects with properties like LOCATION_NAME, LOCATION_DES but you're trying to retrieve data using indexes (data_[3], data_[3]) as if your JSON data is an array of arrays.

From the row().data() manual page:

Function returns: Data source object for the data source of the row. This will be an array if you use DOM sourced data, otherwise it will be the array / object / instance that is used to populate the table with data.

The data that you're trying to retrieve will be available in data_['LOCATION_ID'] and data_['AREA_ID'].

answered May 29, 2015 at 12:03

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

Collectives™ on Stack Overflow

How do get data of a row DataTables?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related