javascript - How to display the data in table for dynamic column headers in jquery?

Question

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

Answer 1

Waitting for answers