Show Hidden Column on Hover When Using Server Side

muttBunch

I want to do something similar to this question:

https://datatables.net/forums/discussion/50541/popup-when-hover-a-row-based-on-the-value-of-a-hidden-cell-in-the-datatable

However, it is my understanding that you cannot use "rowCallBack" when data is coming from the server side.

Please see code below (my table generates perfectly):

var oTable = $('#dataTable-event-logs')
        .DataTable({
            paging: true,
            stateSave: false,
            ajax: {
                url: "/api/v2/LogMonitor/GetLogEvents",
                type: "GET",
                datatype: "json"
            },
            columnDefs: [
                { targets: 5, visible: false }
                    
            ],
            // rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
            //     $(row).attr('title', data[5]);
            // },
            order: [
                [1, 'asc']
            ],
            columns: [
                {
                    data: "eventId", // Header: "Event ID"
                    autoWidth: true
                },
                {
                    data: "level", // Header: "Log Level"
                    autoWidth: true
                },
                {
                    data: "timeStamp", // Header: "Date and Time"
                    autoWidth: true,
                    type: "datetime",
                    render: function (data, type, row, meta) {
                        return moment(data).local().format('MM/DD/YYYY hh:mm:ss');
                    }
                },
                {
                    data: "publisher", // Header: "Source"
                    autoWidth: true
                },
                {
                    data: "taskCategory", // Header: "Category"
                    autoWidth: true
                },
                {
                    data: "description", // Header: "Description (HIDDEN)"
                    autoWidth: true
                }
            ]
        });
        
    $.fn.dataTable.ext.errMode = 'none';

    $('#dataTable-event-logs').on('error.dt', function (e, settings, techNote, message) {
        console.log('An error has been reported by DataTables: ', message);
    }).DataTable();

}

I have taken the example provided from https://live.datatables.net/joxaxiwi/1/edit and tested it to make sure nothing was wrong with my library and the code example from URL worked perfectly in my app.

I'm just not sure how to do it if I have to use fnDrawCallback

Thanks

allan

However, it is my understanding that you cannot use "rowCallBack" when data is coming from the server side.

That is not the case. You can use rowCallback when server-side processing is enabled. It will work just the same as client-side processing (the only real difference is that with client-side processing you might have already seen the row nodes passed in - that isn't the case with server-side processing).

Allan

muttBunch

Thanks Allan, In my above code, I have commented out the:

// rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
//     $(row).attr('title', data[5]);
// },

I commented it out since it wasn't working for me when hovering as it does in the one example. Does placement ordering have anything to do with it?

Thanks

kthorngren

The problem is that the row data is object based, ie columns.data, but trying to access the data using array notation data[5]. Instead use this:

$(row).attr('title', data.description);

muttBunch

Thank you kthorngren, that did the trick, brilliant.