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

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 >
        <table id="example"  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"
}

CodePudding user response：

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

CodePudding user response：

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)