Datatables - Why row() method can not get index value?

Question

here is my code (and ajax data) to insert index column to table. But I don't know why console log don't see the index value. I tried searching solution but couldn't find it. Someone please help me, thanks you so much.

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
    <script>
        $(function () {
            var table = $('#example').DataTable({
                ajax: '../ajax/data/objects_salary.txt',
                columns: [
                    {
                        "render": function (data, type, full, meta) {
                            return meta.row + 1;
                        }
                    },
                    { data: 'name' },
                    { data: 'position' },
                    { data: 'office' },
                    { data: 'extn' },
                    { data: "start_date" },
                    { data: "salary" }
                ]
            });
            $('#example tbody').on('click', 'tr', function () {
                var data = table.row(this).data();
                console.log(data);
            });
        });
    </script>
</head>

<body>
    <div class="container mt-4 bt-4">
        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Index</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Progress</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

Console log output

{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "320800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
}

cheesyMan · Accepted Answer · 2022-04-12 08:12:29Z

1

That's because the meta.row index is NOT part of the ajax data for the table. table.data() shows only the data (i.e., what you set in the data key of columns[] initialization option.)

Indeed, meta.row is just an index you're rendering via the meta object that - according to the Docs - is:

An object that contains additional information about the cell being requested. This object contains the following properties (...etc)

try this:

$('#example tbody').on('click', 'tr', function () {
    const data = dt.row(this).data();
    const index = dt.row(this).index() + 1;

    const rowData = {...data, index};
    console.log(rowData);
});

P.S. var is legacy Javascript, use const / let instead (unless you've really good reasons to use var)

edited Apr 12, 2022 at 8:12

answered Apr 12, 2022 at 8:00

cheesyMan

1,5301 gold badge6 silver badges14 bronze badges

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

Comments

gervene salvador · Accepted Answer · 2022-04-12 03:53:16Z

1

I suggest changing the id to something else, ex. salary_id. if that doesn't work can you also upload your objects_salary.txt

answered Apr 12, 2022 at 3:53

gervene salvador

132 bronze badges

1 Comment

bathudaide Over a year ago

You can see or download objects_salary.txt in datatables (tab Ajax)

Collectives™ on Stack Overflow

Datatables - Why row() method can not get index value?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related