JSFiddle - React, Tailwind, and code Playground

by Ralph Smith

HTML

<body>
    <div>
      <table ID="UpDownGrade">
       
        <thead>
          <tr>
          <th>View</th>
          <th>Select</th>
          <th>Commit</th>
          <th>wireless #</th>
          <th>serial #</th>
          <th>curr usage</th>
          <th>curr limit</th>
          <th>curr code</th>
          <th>better code</th>
          <th>prior inv.</th>
          <th>prior usage</th>
          <th>prior code</th>
          <th>prior inv.</th>
          <th>prior usage</th>
          <th>prior code</th>
          <th>Show</th>
          <th>Mark</th>
          </tr>
        </thead>
        
      </table>
    </div>
  </body>

JavaScript

<script>
      $(document).ready(list_plan_levels) ;
    </script>

// =================================================================================================
// This function responds to clicks in prelist_plan_levels.html
// and loads list_plan_levels.html, whose .ready() function is below this one.

function listPlanLevelsClick(event)  
{ 
  event.preventDefault() ;
  
  var UpDown        = $(this).data('updown'); 
  var posted_period = $(this).data('pp');
  var scope         = $(this).data('scope');
  
  var target        = '#' + $(this).data('target');
  var link          = $(this).attr('href')
  
  localStorage.UpDown = UpDown ;
  localStorage.posted_period = posted_period ;
  localStorage.scope = scope ;
  
  $(target).load(link, function( response, status, xhr ) 
    {
      if ( status == "error" ) 
      {
        var msg = "Sorry but there was an error in function listPlanLevelsClick() when trying to load 'better plans' list: ";
        $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
      }

    });
  
}

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

function list_plan_levels()
{
  
  
  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) ;  // For visibility in header of window
  
  
  $('#UpDownGrade').DataTable(
    {
      ajax: {
      url:        '/cmdb/PHP/do_DataTables_query.php' , 
      data:       { job:            'UpDownGrade'
                  , UpDown:         UpDown
                  , posted_period:  posted_period
                  , scope:          scope
                  },
      dataSrc: ''
    },
    columns: [
        { data: 'View' }
      , { data: 'Select' }
      , { data: 'Commit' }
   ...