Question

我有这个代码用datatables.net插件创建数据表：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type='text/javascript' src='//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>

        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <link type="text/css" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.css" />
        <link type="text/css" href="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css" />

        <script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>

        <script type='text/javascript' src="https://datatables.net/release-datatables/extensions/KeyTable/js/dataTables.keyTable.js"></script>

    </head>
    <body>
        <script type="text/javascript">
            //   function day2Date( day, year ) {
            // return new Date(year,0,day);
            //}
            $(document).ready(function() {

                $('#example').dataTable({
                    "ajax": "table1.php",
                    "columns": [{
                            "data": "ID"
                        }, {
                            "data": "naziv"
                        }, {
                            "data": "vrsta"
                        },

                    ],
                    "columnDefs": [{
                        "targets": 2,
                        "data": "download_link",
                        "render": function(data, type, full, meta) {
                            // return data; 
                            return '<button class="btn btn-success">' + data + '</button>';
                        }
                    }]
                });
            });
            var table = $('#example').DataTable();
            $(document).ready(function() {
                $('#example tbody').on('click', 'td', function() {
                    console.log('Data:' + $(this).html().trim() + 'Row:' + $(this).parent().find('td').html().trim() + 'Column:' + $('#example thead tr th').eq($(this).index()).html().trim());
                    // alert('Row:'+$(this).parent().find('td').html().trim());
                    //alert('Column:'+$('#example thead tr th').eq($(this).index()).html().trim());

                });
                $('#example tbody').on('click', 'tr', function() {
                    console.log('Row index: ', table.row(this).index());
                });
            });
        </script>
        <div class="container">
            <table id="example" class="table table-striped table-bordered table-responsitive" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Naziv</th>
                        <th>Vrsta</th>

                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Naziv</th>
                        <th>Vrsta</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>

我需要得到行索引，所以我写了，你可以从上面的代码中看到：

$('#example tbody').on( 'click', 'tr', function () {
    console.log( 'Row index: '+table.row( this ).index() );

就像我在datatables网站上的文档中看到的那样，但这段代码只返回[object Object]

示例：

Data:12Row:2Column:Naziv 
Row index: [object Object]

为什么呢？ Sombody有解释吗？

Answer 1

当您在JavaScript对象上执行字符串连接时，它将隐式调用Object上的toString()。

默认Object.toString()只返回[object Object]。

使用两个参数打印出对象的内容console.log：

console.log( 'Row index:', table.row( this ).index() );

如果我在DataTable example website上测试，那么它似乎按预期工作，结果是一个数字，所以我认为你的问题中肯定有一些信息缺失...

var table = $('#example').DataTable()
> []
table.row(1).index()
> 1

Answer 2

您已经在外部任何DOM就绪处理程序中包含了一行代码，但在它出现的元素之前。这意味着$('#example')未返回匹配项：

将此行放在DOM就绪处理程序中：

var table = $('#example').DataTable();

e.g

$(document).ready(function () { var table = $('#example').DataTable(); $('#example tbody').on('click', 'td', function () { console.log('Data:' + $(this).html().trim() + 'Row:' + $(this).parent().find('td').html().trim() + 'Column:' + $('#example thead tr th').eq($(this).index()).html().trim()); // alert('Row:'+$(this).parent().find('td').html().trim()); //alert('Column:'+$('#example thead tr th').eq($(this).index()).html().trim()); }); $('#example tbody').on('click', 'tr', function () { console.log('Row index: ', table.row(this).index()); }); });

Javascript返回对象Object

2 个答案: