Populate the table dynamic

[chinmayis865517]

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 solution]

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 ?

[chinmayis865517]

I want to parse table tags using jsoup from a page and print it on anothr page dynamically.

[chinmayis865517]

I want to parse table tags using jsoup from a page and print it on another page dynamically.

[amogh-personal]

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

[chinmayis865517]

Thanks

I want to

Extract the data from the page and parse it to DOM and select <table class="bored">

      [      doc.select("table[class=bored]")    ]  in the driver class

Select <tbody> 

Select <tr>- Extract the rows from the table.

For each column in a row print it's content if not empty by selecting <td>

and how do I iterate

[chinmayis865517]

How do we iterate each row and column and add data in each cell?