From 24cb70edca824a18828c57eb29ed8c8d9a673ffe Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 03:13:19 -0500
Subject: [PATCH] Fix DataTables initialization error on pay page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves "Cannot set properties of undefined (setting '_DT_CellIndex')"
error by modernizing DataTables API usage and handling Turbolinks properly.

Changes:
- Update to modern DataTables API (capital D DataTable() vs lowercase)
- Add check for existing DataTable before initialization
- Properly destroy and recreate DataTable on Turbolinks page loads
- Replace deprecated fnClearTable() with table.clear()
- Replace deprecated fnAddData() with table.row.add() + table.draw()
- Create unified initializePage() function for both ready and turbolinks:load
- Add autoWidth, searching, and ordering options to DataTable config

The DataTable now initializes cleanly without errors and handles
Turbolinks navigation properly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/pay/index.html.erb | 55 +++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/app/views/pay/index.html.erb b/app/views/pay/index.html.erb
index 28c82de..a281a79 100644
--- a/app/views/pay/index.html.erb
+++ b/app/views/pay/index.html.erb
@@ -264,14 +264,38 @@ function buildDeleteLink(dd_id){
 */
 function parseDirectDepostInfo(response){
   var msg = jQuery.parseJSON(JSON.stringify(response));
+  var table = $('#data_table').DataTable();
+
    $.each(msg.user, function(index, val){
-    $('#data_table').dataTable().fnAddData( [
+    table.row.add( [
         '<code class="text-monospace">' + val.bank_account_num + '</code>',
         '<span class="badge bg-light text-dark">' + val.bank_routing_num + '</span>',
         '<span class="badge bg-success">' + val.percent_of_deposit + '%</span>',
         buildDeleteLink(val.id)
     ] );
   });
+
+  table.draw();
+};
+
+/*
+  createDataTable initializes the dd table as a datatable
+*/
+function createDataTable(){
+  // Check if DataTable is already initialized
+  if ($.fn.DataTable.isDataTable('#data_table')) {
+    $('#data_table').DataTable().destroy();
+  }
+
+  $('#data_table').DataTable({
+      "sPaginationType": "full_numbers",
+      "language": {
+        "emptyTable": "No direct deposit accounts configured yet"
+      },
+      "autoWidth": false,
+      "searching": true,
+      "ordering": true
+    });
 };
 
 /*
@@ -280,7 +304,9 @@ function parseDirectDepostInfo(response){
   with the response from the endpoint in order to populate the data table.
 */
 function populateTable() {
-  $('#data_table').dataTable().fnClearTable();
+  var table = $('#data_table').DataTable();
+  table.clear();
+
   $.ajax({
       url: <%= sanitize(user_pay_path(:format => "json", user_id: current_user.id, id: current_user.id).inspect) %>,
     type: "GET",
@@ -293,18 +319,6 @@ function populateTable() {
   });
 };
 
-/*
-  createDataTable initializes the dd table as a datatable
-*/
-function createDataTable(){
-  $('#data_table').dataTable({
-      "sPaginationType": "full_numbers",
-      "language": {
-        "emptyTable": "No direct deposit accounts configured yet"
-      }
-    });
-};
-
 /*
   This function doesn't really work right now but is supposed to offer the user a
   "delete confirmation" message
@@ -426,19 +440,22 @@ function makeActive(){
 };
 
 /*
-  1) makeActive - Adds the active class to the sidebar element
-  2) createDataTable - Initializes the dataTable as such
-  3) populateTable - populates the newly initialized dataTable
+  Initialize page - called on both ready and turbolinks:load
 */
-$(document).ready(function() {
+function initializePage() {
   makeActive();
   createDataTable();
   populateTable();
+}
+
+// Handle normal page loads
+$(document).ready(function() {
+  initializePage();
 });
 
 // Handle Turbolinks page loads
 $(document).on('turbolinks:load', function() {
-  makeActive();
+  initializePage();
 });
 
 </script>