The Datatables JavaScript library is outdated based on a legacy jQuery oriented approach. The goal is to replace DataTables.js with the licensed MUI DataGridPro interface.

With the current version of Store Locator Plus® the DataTables jQuery interface was unused. It used to be part of the location table list interface to try to modernize the WordPress list tables.

This has been removed.

Research

DataTable javascript methods

The primary interaction with the DataTable script appears to be via the DataTable() JavaScript method.

The only reference to DataTable appears to be in the admin-locations-tab.js script where it is attached to the #manage_locations_table HTML element.

#manage_locations_table HTML element

The #manage_locations_table HTML element references are only in the store-locator-plus WordPress plugin.

  • \SLP_Admin_Locations::create_settings_section_Manage
  • wp-content/plugins/store-locator-plus/js/admin-locations-tab.js : 775
    direct jQuery reference where it is used to locate a specific table row for a location
    table_row = jQuery(
    ‘#manage_locations_table tr[data-id=”‘ + location_id + ‘”]’
    );
    where it is used to set the properties of a Vue location object grabbing all values for every location field during an update process.
  • wp-content/plugins/store-locator-plus/js/admin-locations-tab.js : 847
    SLP_Location_Manager.table = jQuery(‘#manage_locations_table’);

Development (AI Assisted)

Prompt

 Review the store-locator-plus plugin for all references to datatables.
  /Users/lancecleveland/PhpstormProjects/WordPress/wp-content/plugins/store-locator-plus
  
  It looks like the datatables minified javascript is loaded here:
  \SLP_Admin_Locations::enqueue_scripts
  
  via
  `wp_enqueue_script( 'slp_datatables', SLPLUS_PLUGINURL . '/js/datatables.min.js', [], filemtime( SLPLUS_PLUGINDIR . '/js/datatables.min.js' ), false );`
  
  and the related style via
  `wp_enqueue_style( 'slp_admin_locations_manager', SLPLUS_PLUGINURL . '/css/admin/datatables.min.css', [], filemtime( SLPLUS_PLUGINDIR . '/css/admin/datatables.min.css' ) );`
  
  This is from the legacy DataTables implementation here:
  https://github.com/DataTables/DataTables
  
  I only find references in admin-locations-tab.js with
  ```ecmascript 6
  SLP_Location_Manager.table = jQuery('#manage_locations_table').DataTable(
      dataTable_options
  );
  ```
  
  Review the store-locator-plus plugin and verify this is the only reference.
  
  Review implementation of other React-in-WordPress components that use wp-scripts methods on how to integrate React components into WordPress legacy admin interfaces. 
  See /Users/lancecleveland/PhpstormProjects/WordPress/wp-content/plugins/store-locator-plus/src/slp_info_react/script.tsx (The SLP Info page React component) 
  and related PHP loader at /Users/lancecleveland/PhpstormProjects/WordPress/wp-content/plugins/store-locator-plus/include/module/admin/SLP_Admin_Info.php for hints.
  
  
  Make a plan to replace the outdated legacy DataTable jQuery-based javascript component with a React MUI DataGridPro component.    
  Share the plan and create a markdown file explaining the plan in /Users/lancecleveland/PhpstormProjects/WordPress/wp-content/plugins/store-locator-plus/documentation.  
  Await specific instructions before  implementing the plan.

Leave a Reply