Topic: Table Editor Javascript Extract All Rows
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 8 months 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 pro premium priority commented 8 months 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 8 months 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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