Show Hidden Column on Hover When Using Server Side

Show Hidden Column on Hover When Using Server Side

muttBunchmuttBunch Posts: 10Questions: 3Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    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

  • muttBunchmuttBunch Posts: 10Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685
    Answer ✓

    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);
    
  • muttBunchmuttBunch Posts: 10Questions: 3Answers: 0

    Thank you kthorngren, that did the trick, brilliant.

Sign In or Register to comment.