search after update data in one column

kfying

hey, I am a newbie in DT and I have a problem which I can't find an answer anywhere.
1. I have a table store system parameters for several machines. there is a checkbox control show/hide one of column( machine info). the last column shows if there is a difference among all the machine for each parameter.
2. the thing is I have three same checkboxes. so I have to use rowcallback to change the value of last column to show the difference.
3. then, I have another checkbox to choose show/not show only those rows with different value. this control based on the last column, if the value in last column is Yes, which means there is a difference in the row, I need to show the row; otherwise I should hide the row. I use table.search('Yes').draw().
4. however, this search thing can't be update with rowcallback record. it always show me rows with 'Yes' when loaded. whatever I change the visibility of some specific columns, it always show me same result.

   function loadGucTable() {
        var table_name = "guc-table"
        $.getJSON(RUN_GUC_CONFIG_QUERY_URL, function(result_data) {
            columns = getTableColumns(result_data[0])
            QA_COLUMN = columns.length - 3;
            DEVO_COLUMN = columns.length - 2;
            INTEG_COLUMN = columns.length - 1;
            hidden_columns = [QA_COLUMN, INTEG_COLUMN, DEVO_COLUMN];
            // Last column is used to store if this row has different GUC values and is made hidden.
            columns.push({ "title" : "Different", "visible": true});
           // Ignores first row since it has field names
            updated_data = updateGucTableWithDiffColumn(result_data.slice(1));

    table = $('#' + table_name).DataTable( {
        "dom": 'l <"toolbar"> frtip',
        "data": updated_data,
        "columns": columns,
        "stateSave": true,
        "pageLength": 100,
        "ordering": true,
        "searchPane": true,
        "rowCallback": function(row, data, index) {
            //Derive the "Difference" column value based on cell values that is visible for this row
            var col = 1;
            var first_value = data[col];
            $("td:eq(-1)", row).text("No");
            while(col < data.length -  1) {
                // Resetting highlight in this cell so that we can highlight if necessary based on
                // current visible data
                $('td', row).eq(col).removeClass(HIGHLIGHT_CSS_CLASSES.join(" "));
                if(data[col] != first_value && !hidden_columns.includes(col)) {
                    $("td:eq(-1)", row).text("Yes");
                }
                col++;
            }

            // $('td', row).eq(data.length - 1).text(data[data.length - 1]);
            // Getting the data after removing hidden values
            var data_without_hidden_col_values = data.slice(0, data.length);
            hidden_columns.forEach(function(hidden_col) {
                data_without_hidden_col_values.splice(hidden_col, 1);
            });
            unique_values_without_hidden_col = unique(data_without_hidden_col_values);
             // For rows which has "Yes" value in last column, highlight different text with different colors.
            if($("td:eq(-1)", row).text() == "Yes") {
                // Find unique values in that row so that each of values can be highlighted in different color.
                col = 1;
                while(col < data_without_hidden_col_values.length - 1) {
                    index = unique_values_without_hidden_col.findIndex(element => element == data_without_hidden_col_values[col])
                    $('td', row).eq(col).addClass(HIGHLIGHT_CSS_CLASSES[index]);
                    col++;
                }

            }

        }
    });
    addShowDiffRowsCheckbox(table);
    addExcludeEndpointCheckbox(table);
    addHideQARegionCheckbox(table);
    addHideDEVORegionCheckbox(table);
    addHideINTEGRegionCheckbox(table);
    hidePopUp();
});
}
   function addShowDiffRowsCheckbox(table) {
       var column = table.column(-1);
       var checkbox = $('<input type="checkbox" id="show-highlighted"> Show rows with different GUC values </input>')
           .appendTo( $('div.toolbar') )
           .on( 'change', function () {
              table.searchPanes.rebuild();
               if($(this).is(':checked')) {
               table.search("Yes").draw();

                } else {
               table.search('').draw();
               }
             });
       }

colin

Hi @kfying ,

There's a lot going on in that code. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin