My simple JS functions failing after adding DataTables()

From page shown in Prelist form.png I click the linked #.

The link's target page list_plan_levels.html consists of my libraries above the comment delimiter, the DataTables() libraries below, then the HTML Table template.

The JS that get's me to Target page is found in excerpts from WorkflowScripts.js.

WorkflowScripts.js (Lots left out because this works.)

// **********************************************************************************
function review_plan_levels()
{ 
  
  $('body').on( "click", 'a.UpDowngrade', listPlanLevelsClick ) ;
  
 ...
 ...
  // -----------------------------------------------------------------------------------------------
  function PlansMetricsSummary_up_gradeable(answer)
  { 
      
    $('#PleaseWait1').fadeOut("fast") ;
    setTimeout(function(){ $('#reference_period').css('width', '245px') ; }, 1000);
    
    $('#body1_1_1').html(posted_period) ;
    
    var Up1 = answer[1]['Upon Import'] ;
    var RemainingUp = answer[1]['# Remaining'] ;
    var Up2 = answer[2]['Upon Import']  ;
    var Up3 = answer[3]['Upon Import']  ;
    
    if ( Up1 != 0 )
    {  $('#body1_1_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP" data-updown="UP">'+Up1+'</a>') ; }
    else
    {  $('#body1_1_2').html('0') ; }
    $('#body1_1_3').html(answer[1]['# Reviewed']) ;
    $('#body1_1_4').html(answer[1]['# Resolved']) ;
    if ( RemainingUp != 0 )
    {  $('#body1_1_5').html(RemainingUp) ; }
    else
    {  $('#body1_1_5').html('0') ; }
    
    if ( Up2 != 0 )
    {  $('#body1_2_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP-1" data-updown="UP">'+Up2+'</a>') ; }
    else
    {  $('#body1_2_2').html('0') ; }
    $('#body1_2_3').html(answer[2]['# Reviewed']) ;
    $('#body1_2_4').html(answer[2]['# Resolved']) ;
    $('#body1_2_5').html(answer[2]['# Remaining']) ;
    
    if ( Up3 != 0 )
    {  $('#body1_3_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP-2" data-updown="UP">'+Up3+'</a>') ; }
    else
    {  $('#body1_3_2').html('0') ; }
    $('#body1_3_3').html(answer[3]['# Reviewed']) ;
    $('#body1_3_4').html(answer[3]['# Resolved']) ;
    $('#body1_3_5').html(answer[3]['# Remaining']) ;
    
  }
}

Select all Open in new window

listPlanLevelsClick() and the JS .ready() function

// =================================================================================================
// This function responds to clicks in prelist_plan_levels.html

function listPlanLevelsClick()  
{ 
  
  
  alert("inside function listPlanLevelsClick()") ;
  
  var UpDown        = $(this).data('updown');
  var posted_period = $(this).data('pp');
  var scope         = $(this).data('scope');
  
  localStorage.UpDown = UpDown ;
  localStorage.posted_period = posted_period ;
  localStorage.scope = scope ;
  
}

// ==================================================================================
// .ready() function for page:  list_plan_levels.html

function list_plan_levels()
{
  alert("inside function list_plan_levels(), the new page's .ready() function.") ;
  
  
  var UpDown = localStorage.UpDown ;
  var posted_period = localStorage.posted_period ;
  var scope = localStorage.scope  ;
  
  var php_params = 'job=UpDownGrade&UpDown='+UpDown+'&posting_period='+posted_period+'&scope='+scope ; 
  
  $('#debug').html(php_params) ;
  
  
  $('#UpDownGrade').DataTable(
    {
      ajax: {
      url:        '/cmdb/PHP/do_DataTables_query.php' , 
      data:       php_params ,
      dataSrc:    'values'
    },
    columns: [
        { data: 'View' }
      , { data: 'Select' }
      , { data: 'Commit' }
      , { data: 'wireless #' }
      , { data: 'serial #' }
      , { data: 'curr usage' }
      , { data: 'curr limit' }
      , { data: 'curr code' }
      , { data: 'better code' }
      , { data: 'prior inv.' }
      , { data: 'prior usage' }
      , { data: 'prior code' }
      , { data: 'prior inv.' }
      , { data: 'prior usage' }
      , { data: 'prior code' }
      , { data: 'Show' }
      , { data: 'Mark' }
    ]
    } );

}

Select all Open in new window

Code fragment that generates data for DataTables(), invoked above (MAYBE).

case "UpDownGrade":
        
        $UpDown = $_GET['UpDown'] ;
        $scope  = $_GET['scope'] ;
        $posted_period = $_GET['posted_period'] ;
        
        do_mysql_multi('CALL UpDownGradeList("'.$UpDown.'", "'.$posted_period.'", "'.$scope.'") ;', 1, $result_vector1, $result_vector2) ;
        
        $ArrayOfObj = array() ;
        
        for ($i=1, $nrows = $result_vector1['nrows']; $i<=$nrows; $i++)
        {
          $ArrayOfObj[] = $result_vector1['values'][$i] ;
        }
        
        echo json_encode($ArrayOfObj) ;
        
        break ;

Select all Open in new window

When I lick the #-link I get the error shows in error1.png, NO table of data, and NOT constrained to DIV w/ ID="center_body".

Please let me know if I need to provide more.

I did try removing my reference to jquery-2.2.3, but the link https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js does not suffice as a substitute.  LOTS of errors.

Thanks again,
Ralph
PreList-form.PNG
error1.PNG
list_plan_levels.html

How is this.replace used in LibraryScripts.js ?

Thank you both.
Turns out, I should have known, new JS code inside DataTable() was causing problems elsewhere in the application.

I'll very soon be making a DataTable() inquiry, but got some of it working!!!