Topic: Table Editor Javascript Extract All Rows

edavey priority asked 1 month ago


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();

  });
});

Kamila Pieńkowska staff answered 1 month ago


You can use rows getter: https://mdbootstrap.com/snippets/standard/kpienkowska/6029467

Or track one of events that are triggered when change occur in the table editor: https://mdbootstrap.com/docs/standard/plugins/table-editor/#api-section-events


edavey priority commented 1 month ago

Thank you Kamila, this led me down the path to solving my problem. Do you know if there is a columns getter as well? I saw there was a columns getter for certain event listeners, but not for the entire table?


Kamila Pieńkowska staff commented 1 month ago

Only in update event. When you console.log table editor instace you can see what you can access without relaying on events: https://mdbootstrap.com/snippets/standard/kpienkowska/6041661



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: DELL laptop Processor 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  • Browser: Chrome
  • OS: Windows 10 Enterprise Version
  • Provided sample code: No
  • Provided link: Yes