Search executed multiple times

MadBoyEvo

Link to test case:

https://codepen.io/MadBoyEvo/pen/qBqodwB

Description of problem:

I'm trying to connect reliably Charts with DataTables. It does work for most bar charts, donuts, and so on - just having problems with line ones. However, while trying to debug this and find why would it act this way I noticed that whenever I click on bars in a chart the first time code below is executed only once. When I click on another bar, it executes 3 times and keeps on executing 3 and more times (the more data is there - it seems to execute more).

function (settings, searchData, index, rowData, counter) {

    if (settings.nTable.id !== 'NewIDtoSearchInChart') {
        return true;
    }
    if (dataTablesChartsEvents['NewIDtoSearchInChart'] === undefined) {
        return true;
    }
    //console.log("Data for table: " + settings.nTable.id + ' finding id ' + dataTablesChartsEvents['NewIDtoSearchInChart'] + ' searching for ' + searchData);
    $('#' + 'NewIDtoSearchInChart' + ' td').removeClass('highlight');
    console.log(count++ + ' ' + rowData + '  ' + index);
    if (searchData.includes(dataTablesChartsEvents['NewIDtoSearchInChart'])) {

        // Get column index of matched value
        var colIndex = searchData.indexOf(dataTablesChartsEvents['NewIDtoSearchInChart']);

        // Get Datatable API
        var table = new $.fn.dataTable.Api(settings);

        // Get cell().node() for matched value
        var cell = table.cell(index, colIndex).node();

        // highlight the cell
        $(cell).addClass('highlight')

        return true;
    }
    return false;
}

I've even added console.log with a counter to see what happens. Could you explain why would this behave this way? Maybe I've implemented something wrong. COuld I prevent this from happening?

kthorngren

Thats a lot of code to try and understand. Sounds like one of your functions creates an event handler that calls the function outputting 0 My Object 1,1,5,20 once the first time three times after that. I would look at that function. If you want help please provide more details of what is called, when you click on the bar chart.

Kevin

MadBoyEvo

I've worked it out. Here's a working solution: https://codepen.io/MadBoyEvo/pen/WNozyoo

I was mixing standard search with search extension and it was conflicting up. Once I switched to just extension I understood that each search is not actually executed multiple times - but it just goes row by row to decide whether to show that row or hide it.

That means each true or false returned by this function actually decides whether row is visible or not based on conditions.

function dataTablesSearchExtension(tableid, settings, searchData, index, rowData, counter, limitRow) {
    if (settings.nTable.id !== tableid) {
        return true;
    }
    if (dataTablesChartsEvents[tableid] === undefined) {
        return true;
    }
    // Get Datatable API
    var table = new $.fn.dataTable.Api(settings);
    var columnid = dataTablesChartsEvents[tableid].columnid

    if (limitRow) {
        if (searchData[columnid] === dataTablesChartsEvents[tableid].columnValue && searchData.includes(dataTablesChartsEvents[tableid].highlightValue)) {
            // Get column index of matched value
            var colIndexHighlight = searchData.indexOf(dataTablesChartsEvents[tableid].highlightValue);
            // Get cell().node() for matched value
            var cell = table.cell(index, colIndexHighlight).node();
            // highlight the cell
            $(cell).addClass('highlight');
            return true;
        }
    } else {
        //console.log("Data for table: " + settings.nTable.id + ' finding id ' + dataTablesChartsEvents['$DataTableID'].highlightValue + ' searching for ' + searchData);
        //console.log(count++ + ' ' + rowData + '  ' + index + ' ' + dataTablesChartsEvents[tableid].highlightValue);
        if (searchData[columnid].includes(dataTablesChartsEvents[tableid].highlightValue)) {
            // Get column index of matched value
            var colIndex = searchData.indexOf(dataTablesChartsEvents[tableid].highlightValue);
            // Get cell().node() for matched value
            var cell = table.cell(index, colIndex).node();
            // highlight the cell
            $(cell).addClass('highlight');
            return true;
        }
    }
    return false;
}