Filtering slowing down and crashing when lots of filtering/drawing.

Woldere

Hey,

I have 4 datatables in 1 page that can filter eachother. A row is selected (radio button) and then click to filter another table, based on the selection. You can keep clicking and filtering from 1 table to another.

When this happens, with every click, the filtering becomes slower (at first instantly filters, near the end 5-6s), until in the end, the script crashes. I just can't figure out what causes this.

The tables all look similar to this:

 touchpointTable = $('#datatable-1').dataTable( {
        "bServerSide": false,
        "bProcessing": true,
        "sServerMethod": "GET",
        "sAjaxSource": "/path/to",
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "iDisplayLength": 5,
        "aoColumns": [
         { "bVisible": true, "bSearchable": false, "bSortable": false, "sWidth": "20%", "sClass": "dataTables_alignCenter" },
         { "bVisible": true, "bSearchable": true, "bSortable": true, "sWidth": "40%", "sClass": "dataTables_alignLeft"},
         { "bVisible": true, "bSearchable": true, "bSortable": true, "sWidth": "40%", "sClass": "dataTables_alignLeft"},
         { "bVisible": false, "bSearchable": true, "bSortable": false, "sClass": "dataTables_alignCenter"},
         { "bVisible": false, "bSearchable": true, "bSortable": true},
         { "bVisible": false, "bSearchable": true, "bSortable": true},
         { "bVisible": false, "bSearchable": true, "bSortable": true}
         ],
        "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
            $('td:eq(0)', nRow).html('<input type="radio" class="touchpoints" name="touchpoints" checked="false" value="'+aData[0]+'">'); 
            $('td:eq(1)',nRow).html('<span name="touchpointName_'+aData[0]+'">'+aData[1]+'</span>');
            $('td:eq(2)',nRow).html('<span name="touchpointType_'+aData[0]+'">'+aData[2]+'</span>');
            $('td:eq(3)', nRow).html('<form><input type="checkbox" class="connect_touchpoint" name="'+aData[1]+'" value="'+aData[3]+'"></form>'); 
       },
        "fnDrawCallback" : function(oSettings) {
            $('.touchpoints').click(function(){
                $('.filter_buttons_touchpoints').show();
            });
            $('#touchpoints_to_concepts').click(function(){
                $('.filter_buttons_concepts').hide();
                var id = $('input[name=touchpoints]:radio:checked').val();
                var instr = $('span[name=touchpointName_'+id+']').html();
                conceptTable.fnFilter( "," + id + ",", 5, false, false);
                $('#filter_message_concepts').html(' (for touchpoint: '+instr+')');
            });
            $('#touchpoints_to_measures').click(function(){
                $('.filter_buttons_measures').hide();
                var id = $('input[name=touchpoints]:radio:checked').val();
                var instr = $('span[name=touchpointName_'+id+']').html();
                measTable.fnFilter( "," + id + ",", 6, false, false);
                $('#filter_message_measures').html(' (for touchpoint: '+instr+')');
            });
            $('#touchpoints_to_kpis').click(function(){
                $('.filter_buttons_kpis').hide();
                var id = $('input[name=touchpoints]:radio:checked').val();
                var instr = $('span[name=touchpointName_'+id+']').html();
                kpiTable.fnFilter( "," + id + ",", 6, false, false);
                $('#filter_message_kpis').html(' (for touchpoint: '+instr+')');
            });
//          $(".touchpoints").prop('checked', false);  //unsets selection.
        }

    });

Possible causes (debugger):

.removeClass from jquery.js

ub from jquery.js

return traditional from this.api = function ( traditional )

Possible causes:

using FnRowCallback incorrectly

using FnDrawCallback incorrectly

should use columns.render instead of callbacks?

something else?

I'm really sorry about not including DataTables live or DataTables debugger. I hope someone can help me anyway.

john_l

My initial thought - I see you are setting up event handlers in the Draw callback - as this gets called multiple times, you will likely end up with the handler functions getting called multiple times for each event, and more and more as time goes on.

Try setting up the event handlers after the table initialization, or in the row callback (on the new rows only) if you need to use deferred rendering.Try debugging your code in something like Firebug , or else just add some console.log statements in the handler functions to see if they are being called multiple times.

Woldere

Thanks a lot john_l. The event handler was indeed being fired multiple times (and increasing every time. I'm now moving them outside the callbacks.

Woldere

Works fine now after moving the click events outside the callback and outside the
oTable = $('#datatable-1').dataTable( { } );

Topic can be closed. Thanks again to john_l.