Javascript return me an Object

I have this code for creating datatable with datatables.net plugin:

<!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>

      

I need to get the index of the string, so I write, as you can see from the above code:

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

      

as I see in the documentation on the datatables website, but this code only returns me [object Object]

Example:

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

      

Why? Does Sombody have an explanation?

+3


source to share


2 answers


You've included one key line of code outside of any ready-made DOM handler, but before the element to which it occurs. This means it $('#example')

doesn't return a match:

Place this line in your ready-made DOM handler:

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

      



eg

$(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());
    });
});

      

+2


source


When you do String concatenation on a JavaScript object, it implicitly calls the toString()

object.

By default, it Object.toString()

just returns [object Object]

.

To print the contents of an object, use console.log

with two arguments:



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

      

If I test on the DataTable example website , then it seems to work as expected and the result is Number, so I think some information is missing from your question ...

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

      

+2


source







All Articles