converting columnlist to array and column headers are displayed in the table -
var arr = [];
$('.borderCrossingSubmit').click(function () {
var columnlist = document.getElementById('columnlist1');
$('.columnreport').each(function () {
$(this).find('li').each(function () {
arr.push($(this).text());
});
});
columnlist.innerHTML = '"' + arr.join('", "') + '"';
var table = document.getElementById('border-CrossingList');
var header = document.createElement("tr");
var th = document.createElement("th");
th.appendChild(document.createTextNode("Trip Number"))
header.appendChild(th);
arr.forEach(function (rowHeader) {
th = document.createElement("th");
th.appendChild(document.createTextNode(rowHeader));
header.appendChild(th);
});
table.append(header);
BindACIReports();
})
Ajax response to get the data (struggling in this to bind the dynamic column headers to the data from ajax and display only those columns with data)
function BindACIReports() {
$.ajax({
url: "../../Report/GetACIBorderReports",
type: "GET",
dataType: "json",
contentType: "application/json;charset=utf-8",
data: {
startdate: $('#fromdate').val(),
enddate: $('#todate').val()},
success: function (result) {
var response = result.data;
table.clear();
if (response != null) {
for (var i = 0; i < response.length; i++) { //unable to bind data to dynamic column headers
//var row = table.row.add([
var tripnumber = response[i].tripnumber;
var cargoCNo = response[i].cargoCNo;
var cargoType = response[i].cargoType;
var port = response[i].port;
var driver = response[i].driver;
var trucknumber = response[i].trucknumber;
var truckplate = response[i].truckplate;
var TruckVinNumber = response[i].TruckVinNumber;
var trailerNumber = response[i].trailerNumber;
var trailerPlate = response[i].trailerPlate;
var ShipperName = response[i].ShipperName;
var ShipperAddress = response[i].ShipperAddress;
var ConsigneeName = response[i].ConsigneeName;
var ConsigneeAddress = response[i].ConsigneeAddress;
var arrivalDate = response[i].arrivalDate;
var arrivalTime = response[i].arrivalTime;
var Seal = response[i].Seal;
var tripstatus = response[i].tripstatus;
var mesgtype = response[i].mesgtype;
var createdate = response[i].createdate;
var eventName = response[i].eventName;
var msgEventCreateDate = response[i].msgEventCreateDate;
//]).draw(true);
//table.row(row).column(1).nodes().to$().addClass('details-control nameFilter');
}
}
}
});
}
ui image
User selects the column names from the column settings, and it gets added to the right , which is border-Crossinglist. On click of Process button, only these columns included in border-Crossing List will be displayed in the table.
I am getting all the data of the columns from ajax response. Now, I need to bind the selected column headers to the data from ajax and display only those column data.
How can i achieve this?
question from:
https://stackoverflow.com/questions/65940910/how-to-display-the-data-in-table-for-dynamic-column-headers-in-jquery 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…