Tooltip popup based on hidden columns...

prgcoder

Hi Guys,

I have tooltips working on my tables using this:

                            var table = $('#myTable').DataTable( {
                                dom: 'ftr',
                                paging: false,
                                ajax: { url: "grid", type: "POST" },
                                fnDrawCallback: function( oSettings ) {
                                    $('#myTable tbody tr').each( function() {
                                        var nTds = $('td', this);
                                        var sName = $(nTds[0]).text();
                                        var sCol1 = $(nTds[1]).text();
                                        var sCol2 = $(nTds[2]).text();
                                        this.setAttribute( 'title', sName + ' Col1: ' + sCol1 + ' Col2: ' + sCol2 );
                                    })
                                },
                                columns: [
                                    {   data: "uid",
                                        type: "string",
                                        visible: false
                                    },
                                    {   data: "fullname",
                                        type: "string",
                                        width: "10%"
                                    },
                                    {   data: "col1",
                                        type: "number"
                                    },
                                    {   data: "col2",
                                        type: "number"
                                    },
                                    {   data: "col3",
                                        type: "number"
                                    },
                                    {   data: "col4",
                                        type: "number"
                                    }
                                ],
                                tableTools: {
                                    sRowSelect: "os",
                                    sRowSelector: 'td:first-child',
                                    aButtons: [
                                        { sExtends: "editor_edit",   editor: editor }
                                    ]
                                }
                            } );

                            /* Show this tooltip on any column in the table. */
                            table.$('tr').tooltip( {
                                    placement : '',
                                    html : true
                            } );

But, I do not want to display col1 and col2 on the screen in the table, so I tried this and the data in col3 and col4 were displayed in my tooltip, not col1 and col2.

...
                                columns: [
                                    {   data: "uid",
                                        type: "string",
                                        visible: false
                                    },
                                    {   data: "fullname",
                                        type: "string",
                                        width: "10%"
                                    },
                                    {   data: "col1",
                                        type: "number",
                                        visible: false  // Hide column
                                    },
                                    {   data: "col2",
                                        type: "number",
                                        visible: false  // Hide column
                                    },
                                    {   data: "col3",
                                        type: "number"
                                    },
                                    {   data: "col4",
                                        type: "number"
                                    }
...

Any help is appreciated.

Kind Regards,
Andy.

allan

The problem is this:

$('td', this);

jQuery can only work with the elements that are in the document, and DataTables removes the hidden elements (display:none has cross browser issues for cells in a table).

You need to use the row().data() method to get the data for the row - for example you might have:

var data = that.row( this ).data();

where that is var that = this so this can be used in the anonymous function.

Allan

prgcoder

Hi Allan,
Thank you for your reply.
I am still having problems - I have tried a number of attempts and am too embarrassed to show you here :( I am not very good with javascript and ajax.
Can you please explain in more detail or point me to an example that is close to my problem.
Kind Regards,
Andy.

Also, my call back function should have been the following instead of the above:

    fnDrawCallback: function( oSettings ) {
        $('#myTable tbody tr').each( function() {
            var nTds = $('td', this);
            var sFullname = $(nTds[0]).text();
            var sCol1 = $(nTds[1]).text();
            var sCol2 = $(nTds[2]).text();
            this.setAttribute( 'title', sFullname + ' Col1: ' + sCol1 + ' Col2: ' + sCol2 );
        })
    },

allan

The problem is still $('td', this); in the above code. You would do something like:

drawCallback: function () {
  var api = this.api();
  api.rows( { page: 'current' } ).every( function () {
    var rowData = this.data();
    api.cell( this.index(), 0 ).node().setAttribute( 'title', ... );
  } );
} );

So we are using this.api() to get the DataTable's API instance (it is a legacy thing for why we need to do that - if I were rewriting DataTables now, this would be the API instance in the callbacks!).

Then rows().every() to loop over the rows, with a selection option to get only the rows for the current page - no point in doing it for hidden pages!

Get the data for the row, and then find the cell node to change the attribute for with cell().node() (the row index and the column index are given as the cell selectors).

Finally set the attribute on the node (use the data in rowData to do that).

Allan