Calling the same function again causes corrupted datatable events

kkislal

Hi,

User can call the below function more than once on the same page. After the first call the table hover and expanding row works fine. But after the second call I get the error; "Uncaught TypeError: Cannot read property 'column' of undefined"

Any ideas will be very appreciated

  var _load_sessions_list_table = function() {

    function format ( d ) {
        // `d` is the original data object for the row
        return '<table cellpadding="0" cellspacing="0" border="0" style="padding-left:10px;">'+
            '<tr>'+
                '<td>Süre:</td>'+
                '<td>'+d.duration+' Dak.</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Toplam Kalori:</td>'+
                '<td>'+d.totalCalories+' Kal.</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Ortalama Nabız:</td>'+
                '<td>' +d.avgHeartRate+ '</td>'+
            '</tr>'+
        '</table>';
    }


    var table =  $('#sessions_list_table').DataTable({
        destroy: true,
        autoWidth: false,
        pageLength: 15,
        dom: '<"datatable-scroll"t><"datatable-footer"ip>',
        stateSave: false,
//          scrollY: 370,
        paging: true,
//          order: [
//              [0, "desc"]
//          ], // set first column as a default sort by asc
        data: sessions_list_data,
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '<i class="icon-plus-circle2"></i>'
            },
            { "data": "startDate",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<a href='/sessions/"+oData.session_id+"'>"+moment(oData.startDate).format( 'YYYY-MM-DD hh:mm')+"</a>");
                }
            },
            { data: 'school_name' },
            { data: 'grade_name' },
            { data: 'course_name' },
            { data: 'cntUsers' },
            { data: 'avgEffort' },
//            { data: 'duration' },
//            { data: 'totalCalories' },
//            { data: 'avgHeartRate' }
        ],
        columnDefs:[
          {targets:1, render:function(data){
            return moment(data).format( 'YYYY-MM-DD HH:MM');
          }},
          {targets:6,  render:function(data){
            return (data == 0) ? "-" : '<span class="badge badge-primary badge-pill font-size-base">% ' + data + '</span>';
          }},
          // {targets:6,  render:function(data){
          //   return data + ' dak.';
          // }},
          // {targets:7,  render:function(data){
          //   return data + ' kal.';
          // }}
        ],
        order: [
            [1, "desc"]
        ]
    });

    $('#sessions_list_table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

    //var table = $('.datatable-highlight').DataTable();

    // Highlighting rows and columns on mouseover
    var lastIdx = null;
    $('.datatable-highlight tbody').on('mouseover', 'td', function() {
        var colIdx = table.cell(this).index().column;

        if (colIdx !== lastIdx) {
            $(table.cells().nodes()).removeClass('active');
            $(table.column(colIdx).nodes()).addClass('active');
        }
    }).on('mouseleave', function() {
        $(table.cells().nodes()).removeClass('active');
    });

  }

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

"Uncaught TypeError: Cannot read property 'column' of undefined"

Is the error is referring to this line?
var colIdx = table.cell(this).index().column;

There is a lot of code to try digging through. It will be hard to offer suggestions without actually seeing the problem. Please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

If you can't do that then I would suggest using console.log statements just before the line with the error to debug what is undefined.

Kevin