Getting the record value when clicking on a cell from jtable

Vote count:

0

I am using Jtable with Express JS and Node Js. I am showing only 8 columns out of the total 18 columns on the main screen and showing other records in a tooltip on demand by hovering on the last column (More details column).

Previously I was using a image and I was able to get all the details correctly. The code is:

ListAllDetails : {
            title : 'More details',
            inputTitle : ' ',
            width : '2%',
            sorting: false,
            edit : false,
            create : false,
            display : function (Data) {

                var $img = $('<button class="jtable-command-button jtable-view-command-button"   />');
                $(img).hover(function (e) {
                    $('body').append("<div class='hoveringTooltip' style='position:fixed;'></div>");
                    $('.hoveringTooltip').html("<div><div class='leftaligns'><strong><label class='jtable-input-label'>Employee Details </label><hr></strong><table min-height:200px; height:200px;width='100%'><tr><td>Employee Number</td><td>:</td><td>" + Data.record.EmployeeNumber + "</td></tr><tr><td>Employee Name</td><td>:</td><td> " + Data.record.Name + "</td></table><hr class='hrstyle'>" + "<strong><label class='jtable-input-label'>About Activity </label></strong><hr><table width='180'><tr><td>Details</td><td>:</td><td>" + Data.record.ActivityDetails + "</td></tr><tr><td>Work Category</td><td>:</td><td> " + Data.record.WorkCategory + "</td></tr><tr><td>Account</td><td>:</td><td> " + Data.record.Account + "</td></tr><tr><td>Dimension</td><td>:</td><td> " + Data.record.Dimension + "</td></tr></div></div>");
                },
                    function () {
                        $('.hoveringTooltip').remove();
                    });
                return $img;
            }
        }
    },

The details of the particular record are shown.

Now I want the details to be displayed by hovering on the particular cell instead of the image. I modified the same code by using html td child property.

But whatever cell I am hovering on, only the last record details are displayed. I dont know what is the problem.

ListAllDetails : {
            title : 'More details',
            inputTitle : ' ',
            width : '2%',
            sorting: false,
            edit : false,
            create : false,
            display : function (Data) {
                //var $img = $('');
                var $img = $('<button class="jtable-command-button jtable-view-command-button"   />');

// First Data records

                console.log(Data);
                $('tr td:nth-child(11)').addClass("jtable-command-column");

                $('tr td:nth-child(11)').hover(function (e) {

//Second data records
                console.log(Data);

                var itemName = $(this).closest("tr").children().eq(1).text();
                console.log(itemName);

                    $('body').append("<div class='hoveringTooltip' style='position:fixed;'></div>");
                $('.hoveringTooltip').html("<div><div class='leftaligns'><strong><label class='jtable-input-label'>Employee Details </label><hr></strong><table min-height:200px; height:200px;width='100%'><tr><td>Employee Number</td><td>:</td><td>" + Data.record.EmployeeNumber + "</td></tr><tr><td>Employee Name</td><td>:</td><td> " + Data.record.Name + "</td></table><hr class='hrstyle'>" + "<strong><label class='jtable-input-label'>About Activity </label></strong><hr><table width='180'><tr><td>Details</td><td>:</td><td>" + Data.record.ActivityDetails + "</td></tr><tr><td>Work Category</td><td>:</td><td> " + Data.record.WorkCategory + "</td></tr><tr><td>Account</td><td>:</td><td> " + Data.record.Account + "</td></tr><tr><td>Dimension</td><td>:</td><td> " + Data.record.Dimension + "</td></tr></div></div>");
            },
                    function () {
                        $('.hoveringTooltip').remove();
                    });
                return $img;
            }
        }
    },

The first console.log(Data) is showing all the records values. But the second console.log(Data), which is inside the hover function is showing only the last record's values irrespective of whatever cell I am hovering in.

Can someone help me in this issue.

asked 1 min ago

Divya

1