I am using the Table Editor plugin in an application I am building.

https://mdbootstrap.com/docs/standard/plugins/table-editor/

After the user has populated the table I am trying to access all data in the table so I can upload to a database model.

I am using the Javascript code "getElementsByTagName()" so I can access all the data. However, because the table is paginated, it only returns what is displayed on the particular page of the table.

Do you know how I can access all the rows of the table?

See below two Javascript functions. The first is one that is extracting data from the edited table and the second one creates the Table Editor Object.

I would greatly appreciate any help you can give me :)

function sendData() {

// extract table as variable
var table = document.getElementById("table_inputs");

// extract column names and cells
var cols = table.getElementsByTagName("th");
var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

// do something with rows...
// do something with cols...}

$(document).ready(function() { $("#load-x-ref").on("submit", function(event) {

    var projectId = $("#projectIdSelection").val();
    var status = $("#statusSelection").val();

    $.ajax({
      type: "POST",
      url: "/Load-Xref",
      data: {"projectid": projectId, "status": status}
   }).done(function(df_xref_json) {

    // parse json output from python
    var json_output = JSON.parse(df_xref_json);

    // Table Editor Columns
    const advancedColumns = [];

    for ([index, col] of Object.keys(json_output).entries()) {
      var temp_object = {width: 80, label: col, field: col.replace(/\s/g, '').toLowerCase()};
      advancedColumns.push(temp_object);
    }

    // Table Editor Rows 
    const advancedRows= [];

    var num_rows = Object.values(json_output.ProjectId).length;

    // iterate over each row and add it to the json object for table editor javascript function
    for (var i = 0; i < num_rows; i++) {

      var temp_object = {
        projectid: json_output['ProjectId'][i],
        vehicleid: json_output['VehicleId'][i],
        powertrain: json_output['Powertrain'][i],
        vehicleclass: json_output['VehicleClass'][i],
        bodystyle: json_output['Bodystyle'][i],
        packquantity: json_output['PackQuantity'][i],
        matchquality: json_output['MatchQuality'][i],
        comments: json_output['Comments'][i],
        completion: json_output['Completion'][i],
      };

      advancedRows.push(temp_object);
    }

    const tableDisableEdit = new TableEditor(
      document.getElementById('table_inputs'),
      { columns: advancedColumns, rows: advancedRows },
      { entries: 5, entriesOptions: [5, 10, 15] }
    );

    $("#xref-table-editor").removeClass("invisible").addClass("visible");

   });

   event.preventDefault();

  });
});