Populate the table dynamic

Question

I want to know how can we populate the whole content of a table and populate the data in each cell of a table.

navjots90210021 · Accepted Answer

Add some markup in component htl file. use ajax and jquery to populate dynamically. Please post more info so what is use case ? Using AEM forms ?

amogh-personal · Answer

Use https://datatables.net/ plugin to generate table on page and the bind your data using Ajax.

You can also use use-script along with jsoup api to avoid jquery/ajax. Adding some sample code for your understanding. You can then use this in your component html.

"use strict";
var jsoup = Packages.org.jsoup.Jsoup;
var document = Packages.org.jsoup.nodes.Document;
var element = Packages.org.jsoup.nodes.Element;
var elements = Packages.org.jsoup.select.Elements;
var sectionID = Math.floor((Math.random() * 100) + 1);

use(function() {

    var tableHTML = properties.get("tableData");
    var csvPath = properties.get("csvPath");
    var captionAlignment = properties.get("caption-align");
    var tableNewWidth = properties.get("paginationOn");
	var captionColor = properties.get("caption-color");
    var captionFontWeight = properties.get("caption-font-weight");
    var captionSize =  properties.get("caption-size");


    if (tableHTML != null && tableHTML != '') {
        document = jsoup.parseBodyFragment(tableHTML);
        element = document.select("table");
        var tableWidth = element.attr("width");

		element.attr("width","");
        var tableBorder = element.attr("border");
        element.attr("id","tableNew_"+sectionID);
        element.addClass("dataTable");
        var caption = element.select("caption");
        var captionStyles = ["text-align:" + captionAlignment + ";color:" + captionColor + "; font-weight:" + captionFontWeight + "; font-size:"+ captionSize +"px"];
        caption.attr("style",captionStyles);
        element.attr("style","border:" + tableBorder + "px solid;display:none;");
        var tableStringHtml = element.toString();

        return {
            id: sectionID,
            width: tableWidth,
            html: tableStringHtml,
            pageTitle: currentPage.getTitle()
        };
    }
});

Sign up

Login with SSO

Login to the community

Login with SSO