Sort on Ajax-driven dynamic table

geebeetoo · May 2020

Link to test case: I can't link as this is within an app. We can create a mockup if really necessary. Hoping the description might lead to a solution.

Description of problem:

Context:
I have a table that we filter the data with checkboxes and it reduces the number of rows displayed, narrowing down choices. And each checkboxes trigger an ajax call to return a fresh bunch of rows.

The problem:
When we click on the column header to sort the table with DataTables. the sort returns ALL the rows unflitered (exactly what was loaded on page load).

How can we prevent that, and have the sort only sort what is actually displayed once we filtered the table with the checkboxes?

Here is a snapshot:

kthorngren · May 2020

ilter the data with checkboxes and it reduces the number of rows displayed, narrowing down choices. And each checkboxes trigger an ajax call to return a fresh bunch of rows.

How are you doing this? Maybe you can start by posting the code used to perform this function. Likely we will need to refactor it to use Datatables API's for the table updates.

Kevin

geebeetoo · May 2020

This is the main page. The Ajax return is at line 178.

<?php
require_once TRE_BASE . "trecentral/aaMain/header.php" ;

<?php
>
/css/reportStyles2_DataTables.css' type='text/css' rel='stylesheet' />
/js/jReports2_ViewList.js">
/js/jReports2_DataTablesList.js?version=1'>
<?php
$reportTypeCount = 1 ; // starts at 1 because historical is always showing
$showingAll = 0;
>

    
         
            
                <?php echo $_SESSION['lang']['myreports'] ?>
             
         
     

?>


<div class='container'>
    <div class='row' id='lookupReport'> 
    
    </div> <!-- // row div  -->

    <div class='row'>
        <div class='col-lg-8 col-sm-12'>
    
            <table class='filterTable'>
            <thead>
            <tr>
                <th scope='col'></th>
                <th scope='col'><?php echo $_SESSION['lang']['historical']?></th>  
                <?php if($_SESSION['IsRealTimeReports'] > 0){ ?>
                    <th scope='col'><?php echo $_SESSION['lang']['realtime']?></th>
                <?php $reportTypeCount++;
                } 
                if($_SESSION['IsDashboards'] > 0){ ?>         
                    <th scope='col'><?php echo $_SESSION['lang']['dashboard']?></th>
                <?php $reportTypeCount++;
                }
                if($_SESSION['IsScorecards'] > 0){ ?>
                    <th scope='col'><?php echo $_SESSION['lang']['scorecard']?></th>
                <?php $reportTypeCount++;
                }
                if($_SESSION['IsDeepDive'] > 0){ ?>
                    <th scope='col'><?php echo $_SESSION['lang']['deepdive']?></th>
                <?php $reportTypeCount++;
                }
                if($reportTypeCount > 1){ ?>
                    <th scope='col'><?php echo $_SESSION['lang']['all']?></th>
                <?php $showingAll = 1;
                } ?>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope='row' class='leftHeader'><?php echo $_SESSION['lang']['private']?></th>
                <td><input type='checkbox' class='filterCheckboxesVR privateCheckboxes' id='privateHS' name='privateHS' checked ></td>
                <?php if($_SESSION['IsRealTimeReports'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR privateCheckboxes' id='privateRT' name='privateRT' checked ></td>
                <?php 
                }
                if($_SESSION['IsDashboards'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR privateCheckboxes' id='privateDB' name='privateDB' checked ></td>
                <?php
                }
                if($_SESSION['IsScorecards'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR privateCheckboxes' id='privateSC' name='privateSC' checked ></td>
                <?php
                }
                if($_SESSION['IsDeepDive'] > 0){?>
                    <td><input type='checkbox' class='filterCheckboxesVR privateCheckboxes' id='privateDD' name='privateDD' checked ></td>
                <?php
                }
                ?>
                <?php
                if($showingAll){?>
                    <td><input type='checkbox' class='checkboxAll' id='privateAll' name='privateAll' checked ></td>
                <?php
                } 
                ?>
              
            </tr>
            <tr>
                <th scope='row' class='leftHeader'><?php echo $_SESSION['lang']['public']?></th>
                <td><input type='checkbox' class='filterCheckboxesVR publicCheckboxes' id='publicHS' name='publicHS' checked ></td>
                <?php if($_SESSION['IsRealTimeReports'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR publicCheckboxes' id='publicRT' name='publicRT' checked ></td>
                <?php 
                }
                if($_SESSION['IsDashboards'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR publicCheckboxes' id='publicDB' name='publicDB' checked ></td>
                <?php 
                } 
                if($_SESSION['IsScorecards'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR publicCheckboxes' id='publicSC' name='publicSC' checked ></td>
                <?php 
                }
                if($_SESSION['IsDiveDive'] > 0){?>
                    <td><input type='checkbox' class='filterCheckboxesVR publicCheckboxes' id='publicDD' name='publicDD' checked ></td>
                <?php 
                }
                if($showingAll){?>
                    <td><input type='checkbox' class='checkboxAll' id='publicAll' name='publicAll' checked ></td>
                <?php }?>
              
            </tr>
            <tr>
                <th scope='row' class='leftHeader'><?php echo $_SESSION['lang']['predefined']?></th>
                <td><input type='checkbox' class='filterCheckboxesVR predefinedCheckboxes' id='predefinedHS' name='predefinedHS' checked></td>
                <?php 
                if($_SESSION['IsRealTimeReports'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR predefinedCheckboxes' id='predefinedRT' name='predefinedRT' checked></td>
                <?php 
                }
                if($_SESSION['IsDashboards'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR predefinedCheckboxes' id='predefinedDB' name='predefinedDB' checked></td>
                <?php 
                }
                if($_SESSION['IsScorecards'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR predefinedCheckboxes' id='predefinedSC' name='predefinedSC' checked></td>
                <?php 
                }
                if($_SESSION['IsDeepDive'] > 0){ ?>
                    <td><input type='checkbox' class='filterCheckboxesVR predefinedCheckboxes' id='predefinedDD' name='predefinedDD' checked></td>
                <?php 
                }
                if($showingAll){ ?>
                    <td><input type='checkbox' class='checkboxAll' id='predefinedAll' name='predefinedAll' checked ></td>
                <?php }?>
        
            </tr>
            <tr id='favoritesRow'>
                <th scope='row' class='leftHeader '><?php  echo $_SESSION['lang']['favorites'] ?></th>
                <td><input type='checkbox' id='favoritesHS' class='filterCheckboxesVR favoritesCheckboxes' name='favoritesHS' ></td>
                <?php 
                if($_SESSION['IsRealTimeReports'] > 0){ ?>
                    <td><input type='checkbox' id='favoritesRT' class='filterCheckboxesVR favoritesCheckboxes' name='favoritesRT'  ></td>
                <?php 
                }
                if($_SESSION['IsDashboards'] > 0){ ?>
                    <td><input type='checkbox' id='favoritesDB' class='filterCheckboxesVR favoritesCheckboxes' name='favoritesDB'  ></td>
                <?php 
                }
                if($_SESSION['IsScorecards'] > 0){ ?>
                    <td><input type='checkbox' id='favoritesSC' class='filterCheckboxesVR favoritesCheckboxes' name='favoritesSC'  ></td>
                <?php 
                } 
                if($_SESSION['IsDeepDive'] > 0){ ?>
                    <td><input type='checkbox' id='favoritesDD' class='filterCheckboxesVR favoritesCheckboxes' name='favoritesDD'  ></td>
                <?php 
                }
                $myFave ="";
                if(isset($_REQUEST['myFavorites']) && $_REQUEST['myFavorites']==1){ 
                  $myFave = "checked";
                }?>
                <td><input type='checkbox' id='favoritesAll' class='checkboxAll' <?php echo $myFave?> name='favoritesAll'  ></td>
            </tr>
            </tbody>
            </table>
        </div>
    </div>

    <div class='row'>
        <div class='col-lg-12 col-12'>
           <div class='table-responsive'>
                <table id='emxDataTableList' class="emxDataTableList table table-hover">
                <thead>
                <tr>
                    <th><?php echo $_SESSION['lang']['collection']?></th>
                    <th><?php echo $_SESSION['lang']['type']?></th>
                    <th><?php echo $_SESSION['lang']['name']?></th>
                    <th><?php echo $_SESSION['lang']['favorite']?></th>
                </tr>
                </thead>
                <tbody class='reportListAJAX'>
                    <?php require TRE_BASE . "trecentral/inc/reports/buildReport_List.inc" ?>
                </tbody>
                </table>
            </div>
        </div>
    </div> <!-- / row div -> report table -->
</div> <!-- //container div -->

geebeetoo · May 2020

This is the javascript that returns the subset of data based on the checkboxes.

    $("body").on('change', "input[type='checkbox'].filterCheckboxesVR", function(){
    
        checkPublicHS = 0;
        checkPublicRT = 0;
        checkPublicDB = 0;
        checkPublicSC = 0;
        checkPublicAll = 0;
        
        checkPrivateHS = 0;
        checkPrivateRT = 0;
        checkPrivateDB = 0;
        checkPrivateSC = 0;
        checkPrivateAll = 0;
        
        checkPredefinedHS = 0;  
        checkPredefinedRT = 0;
        checkPredefinedDB = 0;
        checkPredefinedSC = 0;
        checkPredefinedAll = 0;
        
        checkFavoritesHS = 0;
        checkFavoritesRT = 0;
        checkFavoritesDB = 0;
        checkFavoritesSC = 0;
        checkFavoritesAll = 0;
        
        checkDraftsHS = 0;
        checkDraftsRT = 0;
        checkDraftsDB = 0;
        checkDraftsSC = 0;
        checkDraftsAll = 0;
        validateCheckboxes();
        
        console.log ("check favorite Hist = "+checkFavoritesHS);
        
        $.ajax({
                   type: "POST",
                   url: "/ajaxCalls/ajaxViewReportFilters.php?                                                                                           thePublicHS="+checkPublicHS+"&thePublicRT="+checkPublicRT+"&thePublicDB="+checkPublicDB+"&thePublicSC="+checkPublicSC+
        "&thePrivateHS="+checkPrivateHS+"&thePrivateRT="+checkPrivateRT+"&thePrivateDB="+checkPrivateDB+"&thePrivateSC="+checkPrivateSC+
        "&thePredefinedHS="+checkPredefinedHS+"&thePredefinedRT="+checkPredefinedRT+"&thePredefinedDB="+checkPredefinedDB+"&thePredefinedSC="+checkPredefinedSC+
        "&theFavoritesHS="+checkFavoritesHS+"&theFavoritesRT="+checkFavoritesRT+"&theFavoritesDB="+checkFavoritesDB+"&theFavoritesSC="+checkFavoritesSC+"&theDraftsHS="+checkDraftsHS+"&theDraftsRT="+checkDraftsRT+"&theDraftsDB="+checkDraftsDB+"&theDraftsSC="+checkDraftsSC,
               success: function(msg){
                        //alert(msg);
                        $('.reportListAJAX').html(msg);
                    }
            });
    });

geebeetoo · May 2020

This is the php file called by ajax:

require TRE_BASE . "trecentral/inc/reports/buildReport_List.inc";

AND this is the CODE called by the require:

<?php
$strFaveHS = "";
$strFaveRT = "";
$strFaveSplash = "";

mysqli_select_db($link, $_SESSION['custdb']);

$sql7 = "SELECT FavoriteID from a1_Favorites WHERE UserID={$_SESSION['UserID']};";

$arrFavoriteID=array();

$result7 = mysqli_query($link, $sql7);

while ($row = mysqli_fetch_array($result7)){

    $arrFavoriteID[]=$row['FavoriteID'];

}

mysqli_free_result($result7);


if(isset($_REQUEST['theFavoritesHS']) && $_REQUEST['theFavoritesHS']==1) {
    
    $strFaveHS = " AND FavoriteID IN (".implode(",", $arrFavoriteID).")";

}

if(isset($_REQUEST['theFavoritesRT']) && $_REQUEST['theFavoritesRT']==1) {
    
    $strFaveRT = " AND FavoriteID IN (".implode(",", $arrFavoriteID).")";

}

if(isset($_REQUEST['myFavorites']) && $_REQUEST['myFavorites']==1){
    
    $strFaveSplash = " AND FavoriteID IN (".implode(",", $arrFavoriteID).")";
}

///////////////////////// building strings to get drafts in queries ////////////////////////////////////

if(isset($_REQUEST['theDraftsHS']) && $_REQUEST['theDraftsHS']==1) {
    
    $strDrafts = " AND FavoriteType='draft'";

}

////////////////////////////////////////////////////////////////////////////////////////////////////////

//historical queries
// private query
$sql = "SELECT FavoriteID, TimeCreated, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName, DefaultFlag, PublicFlag, AgentView, '{$_SESSION['lang']['private']}' as Collection_Group, '{$_SESSION['lang']['historical']}' as Report_Type 
                FROM a2_Historical 
                WHERE UserID={$_SESSION['UserID']} $strFaveHS $strFaveSplash $strDrafts";
// public query
if(isset($_SESSION['ReportsAdmin']) && $_SESSION['ReportsAdmin'] == 1 ){
                    $sql2 = "SELECT FavoriteID, TimeCreated, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName, DefaultFlag,PublicFlag, AgentView, '{$_SESSION['lang']['public']}' as Collection_Group, '{$_SESSION['lang']['historical']}' as Report_Type
                FROM a2_Historical 
                WHERE FavoriteID IN (SELECT FavoriteID FROM a2_Historical_Public) $strFaveHS $strFaveSplash $strDrafts
                ORDER BY FavoriteName";
                }else{
                        $sql2 = "SELECT FavoriteID, TimeCreated, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName , DefaultFlag,PublicFlag, AgentView, '{$_SESSION['lang']['public']}' as Collection_Group, '{$_SESSION['lang']['historical']}' as Report_Type
                    FROM a2_Historical 
                    WHERE FavoriteID IN (SELECT FavoriteID FROM a2_Historical_Public WHERE UserID =1) $strFaveHS $strFaveSplash $strDrafts
                    ORDER BY FavoriteName";
                }
// predefined
                $sql6 = "SELECT FavoriteID, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName, DefaultFlag, PublicFlag, AgentView, '{$_SESSION['lang']['predefined']}' as Collection_Group, '{$_SESSION['lang']['historical']}' as Report_Type
                FROM a2_Historical 
                WHERE PublicFlag = 9 AND FavoriteID IN (SELECT FavoriteID FROM a2_Historical_Public WHERE UserID=UserID=1) $strFaveHS   $strFaveSplash $strDrafts       
                ORDER BY FavoriteName";

                
//real time queries
//private
$sql3 = "SELECT FavoriteID, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName , DefaultFlag, PublicFlag, AgentView, '{$_SESSION['lang']['private']}' as Collection_Group, '{$_SESSION['lang']['realtime']}' as Report_Type 
                FROM a3_RealTime 
                WHERE PublicFlag = 0 $strFaveRT $strFaveSplash $strDrafts
                ORDER BY FavoriteName";

// public
if(isset($_SESSION['ReportsAdmin']) && $_SESSION['ReportsAdmin'] == 1 ){
                    $sql4 = "SELECT FavoriteID, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName , DefaultFlag,PublicFlag, AgentView, '{$_SESSION['lang']['public']}' as Collection_Group, '{$_SESSION['lang']['realtime']}' as Report_Type 
                FROM a3_RealTime 
                WHERE PublicFlag = 1 AND FavoriteID IN (SELECT FavoriteID FROM a3_RealTime_Public $strFaveRT $strFaveSplash $strDrafts ORDER BY FavoriteName)";
                    
                }else{
                    $sql2 = "SELECT FavoriteID, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName , DefaultFlag,PublicFlag, AgentView, '{$_SESSION['lang']['public']}' as Collection_Group, '{$_SESSION['lang']['realtime']}' as Report_Type 
                FROM a3_RealTime 
                WHERE PublicFlag = 1 AND FavoriteID IN (SELECT FavoriteID FROM a3_RealTime_Public WHERE UserID=UserID=1) $strFaveRT $strFaveSplash $strDrafts    
                ORDER BY FavoriteName";
                }
//predefined                
$sql5 = "SELECT FavoriteID, CONCAT(UPPER(SUBSTRING(FavoriteName,1,1)), LOWER(SUBSTRING(FavoriteName,2))) as FavoriteName , DefaultFlag, PublicFlag, AgentView, '{$_SESSION['lang']['predefined']}' as Collection_Group, '{$_SESSION['lang']['realtime']}' as Report_Type 
                FROM a3_RealTime 
                WHERE PublicFlag = 9 AND FavoriteID IN (SELECT FavoriteID FROM a3_RealTime_Public WHERE UserID=UserID=1) $strFaveRT $strFaveSplash $strDrafts   
                ORDER BY FavoriteName";


        
$finalResultArray = array();

if(!isset($_REQUEST['thePrivateHS']) || (isset($_REQUEST['thePrivateHS'])  && $_REQUEST['thePrivateHS']==1)){
    
    $result = mysqli_query($link, $sql);
    
    while ($row = mysqli_fetch_array($result)){
        $finalResultArray[]=$row;
    }
    
    mysqli_free_result($result);
}

if(!isset($_REQUEST['thePublicHS']) || (isset($_REQUEST['thePublicHS'])  && $_REQUEST['thePublicHS']==1)){

    $result2 = mysqli_query($link, $sql2);
    
    while ($row = mysqli_fetch_array($result2)){
        $finalResultArray[]=$row;
    }
    
    mysqli_free_result($result2);
}

if(!isset($_REQUEST['thePrivateRT']) || (isset($_REQUEST['thePrivateRT'])  && $_REQUEST['thePrivateRT']==1)){
    $result3 = mysqli_query($link, $sql3);

    while ($row = mysqli_fetch_array($result3)){
        $finalResultArray[]=$row;
    }

    mysqli_free_result($result3);
}

if(!isset($_REQUEST['thePublicRT']) || (isset($_REQUEST['thePublicRT'])  && $_REQUEST['thePublicRT']==1)){
    $result4 = mysqli_query($link, $sql4);
    
    while ($row = mysqli_fetch_array($result4)){
        $finalResultArray[]=$row;
    }
    
    mysqli_free_result($result4);
}

if(!isset($_REQUEST['thePredefinedRT']) || (isset($_REQUEST['thePredefinedRT'])  && $_REQUEST['thePredefinedRT']==1)){

    $result5 = mysqli_query($link, $sql5);
    
     while ($row = mysqli_fetch_array($result5)){
        $finalResultArray[]=$row;
    }
    
    mysqli_free_result($result5);
}

if(!isset($_REQUEST['thePredefinedHS']) || (isset($_REQUEST['thePredefinedHS'])  && $_REQUEST['thePredefinedHS']==1)){

    $result6 = mysqli_query($link, $sql6);
    
    while ($row = mysqli_fetch_array($result6)){
        $finalResultArray[]=$row;
    }
    
    mysqli_free_result($result6);
}

foreach($finalResultArray as $key => $arrayValue){
echo 
"<tr>
    <td class='drilldown' data-getfavoriteid='{$arrayValue['FavoriteID']}'>{$arrayValue['Collection_Group']}</td>
    <td class='drilldown' data-getfavoriteid='{$arrayValue['FavoriteID']}'>{$arrayValue['Report_Type']}</td>
    <td class='drilldown' data-getfavoriteid='{$arrayValue['FavoriteID']}'>{$arrayValue['FavoriteName']}</td>
    <td><input data-getuserid='{$_SESSION['UserID']}' data-getfavoritename='{$arrayValue['FavoriteName']}' data-getfavoriteid='{$arrayValue['FavoriteID']}' id='checkFavorites' type='checkbox' ";
    if(in_array($arrayValue['FavoriteID'], $arrFavoriteID)){
        
       echo " checked ";
    }
    echo "name=''/></td></tr>";
}

kthorngren · May 2020

This is the main page. The Ajax return is at line 178.

I gather that this is the code executed to update the table via the checkbox?

                <tbody class='reportListAJAX'>
                    <?php require TRE_BASE . "trecentral/inc/reports/buildReport_List.inc" ?>
                </tbody>

Datatables won't know about the changes when directly updating the DOM. Datatables has a data cache which it uses for sorting, search, etc. When updating the table you will need to use Datatables APIs to update the Datatable data cache. Here are some options:

Invalidate the updated table with rows().invalidate()
Destroy and re-initialize the Datatable using either destroy() or destroy
Use Datatables APIs to update the table data: clear() followed by rows.add()

Kevin

geebeetoo · May 2020

I am trying to use any of your suggestions but I am not sure where and how to integrate them...here is what I tried and it just prevented my script from even refreshing based on checboxes.

Where and how should I use the code you suggested above?

code:

let checkPublicHS = 0;
let checkPublicRT = 0;
let checkPublicDB = 0;
let checkPublicSC = 0;
let checkPublicAll = 0;

let checkPrivateHS = 0;
let checkPrivateRT = 0;
let checkPrivateDB = 0;
let checkPrivateSC = 0;
let checkPrivateAll = 0;

let checkPredefinedHS = 0;  
let checkPredefinedRT = 0;
let checkPredefinedDB = 0;
let checkPredefinedSC = 0;
let checkPredefinedAll = 0;

let checkFavoritesHS = 0;
let checkFavoritesRT = 0;
let checkFavoritesDB = 0;
let checkFavoritesSC = 0;
let checkFavoritesAll = 0;

let checkDraftsHS = 0;
let checkDraftsRT = 0;
let checkDraftsDB = 0;
let checkDraftsSC = 0;
let checkDraftsAll = 0;


$(function(){

    var table = $('.emxDataTableList').DataTable({
        
        columnDefs: [
        { targets: [3], 'orderable': false}
        ],

        
        language: {
                sEmptyTable:"No data available in table",
                lengthMenu: "Display _MENU_ records per page",
                zeroRecords: "No Data",
                infoEmpty: "No records available",
                infoFiltered: "(Filtered from _MAX_ total records)",
                search:'',
                searchPlaceholder: "Search..."
            },
        info:false,
        order: [],
        scrollY: '400px',
        scrollX:false,
        scrollCollapse: true,           
        paging: false,
        fixedColumns: true,
        fixedHeader:false,
        orderMulti:true,
    
        buttons: [ 'excel', { extend:'pdf', orientation:'landscape',pageSize: 'LEGAL'}, {
                    extend: 'colvis',
                    text: 'Show/Hide columns',
                    postfixButtons: [ {extend :'colvisRestore', text: 'Restore'} ]
                }
                 ],
                
        initComplete: function () {
          this.api().buttons().container()
                //.appendTo( $ ('#table_id_wrapper .col-md-6:eq(0)', this.api().table (). container ()));
                //.appendTo( $('#table_id_wrapper .col-md-6:eq(0)' ) );
                .appendTo( $('.col-md-6:eq(0)', this.api().table().container()));
                //document.getElementById("expand-row").classList.remove('sorting');
                //s$("th.expand-row").removeClass('sorting');
        }
    
    });

    $("body").on('change', "input[type='checkbox'].filterCheckboxesVR", function(){
    
        checkPublicHS = 0;
        checkPublicRT = 0;
        checkPublicDB = 0;
        checkPublicSC = 0;
        checkPublicAll = 0;
        
        checkPrivateHS = 0;
        checkPrivateRT = 0;
        checkPrivateDB = 0;
        checkPrivateSC = 0;
        checkPrivateAll = 0;
        
        checkPredefinedHS = 0;  
        checkPredefinedRT = 0;
        checkPredefinedDB = 0;
        checkPredefinedSC = 0;
        checkPredefinedAll = 0;
        
        checkFavoritesHS = 0;
        checkFavoritesRT = 0;
        checkFavoritesDB = 0;
        checkFavoritesSC = 0;
        checkFavoritesAll = 0;
        
        checkDraftsHS = 0;
        checkDraftsRT = 0;
        checkDraftsDB = 0;
        checkDraftsSC = 0;
        checkDraftsAll = 0;
        validateCheckboxes();
        
        console.log ("check favorite Hist = "+checkFavoritesHS);
        
        $.ajax({
                   type: "POST",
                   url: "/ajaxCalls/ajaxViewReportFilters.php?                                                                                           thePublicHS="+checkPublicHS+"&thePublicRT="+checkPublicRT+"&thePublicDB="+checkPublicDB+"&thePublicSC="+checkPublicSC+
        "&thePrivateHS="+checkPrivateHS+"&thePrivateRT="+checkPrivateRT+"&thePrivateDB="+checkPrivateDB+"&thePrivateSC="+checkPrivateSC+
        "&thePredefinedHS="+checkPredefinedHS+"&thePredefinedRT="+checkPredefinedRT+"&thePredefinedDB="+checkPredefinedDB+"&thePredefinedSC="+checkPredefinedSC+
        "&theFavoritesHS="+checkFavoritesHS+"&theFavoritesRT="+checkFavoritesRT+"&theFavoritesDB="+checkFavoritesDB+"&theFavoritesSC="+checkFavoritesSC+"&theDraftsHS="+checkDraftsHS+"&theDraftsRT="+checkDraftsRT+"&theDraftsDB="+checkDraftsDB+"&theDraftsSC="+checkDraftsSC,
               success: function(msg){
                        //alert(msg);
                        $('.reportListAJAX').html(msg);

                            table
                                .rows()
                                .invalidate()
                                .draw();


                    }
            });
    });

});

kthorngren · May 2020

Where and how should I use the code you suggested above?

Seems like that would be a good place. Its hard to say without seeing it.

here is what I tried and it just prevented my script from even refreshing based on checboxes.

Do you get errors in your browser's console?

You've posted a lot of code which is hard to imagine whats happening. Please post a link to your page or a test case replicating the problem so we can help diagnose.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

geebeetoo · May 2020

Do you get errors in your browser's console?

No.

Please post a link to your page or a test case replicating the problem so we can help diagnose.

I'm working on that.

Sort on Ajax-driven dynamic table

Sort on Ajax-driven dynamic table

Answers

Howdy, Stranger!

Categories

DataTables

Sort on Ajax-driven dynamic table

Sort on Ajax-driven dynamic table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables