数据表 - 为什么 row() 方法无法获取索引值？

Question

这是我的代码（和 ajax data），用于将索引列插入 table。但是我不知道为什么控制台日志看不到索引值。我尝试搜索解决方案但找不到。有没有人帮帮我，非常感谢。

<!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/bootstrap@4.0.0/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>

控制台日志输出

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

Answer 1

我建议将 id 更改为其他内容，例如。 salary_id。如果这不起作用，您还可以上传您的 objects_salary.txt

Answer 2

那是因为 meta.row 索引不是 table 的 ajax 数据的一部分。 table.data() 仅显示 data（即您在 columns[] 初始化选项的 data 键中设置的内容。）

事实上，meta.row 只是您通过 meta 对象呈现的索引 - according to the Docs - 是：

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

试试这个：

$('#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 是旧版 Javascript，请改用 const / let（除非您有充分的理由使用 var)

数据表 - 为什么 row() 方法无法获取索引值？

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

javascript

jquery

datatables