Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Populate the table dynamic

chinmayis865517
Level 2
Level 2

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

1 Accepted Solution
navjots90210021
Correct answer by
Level 2
Level 2

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 ?

View solution in original post

2 Replies
navjots90210021
Correct answer by
Level 2
Level 2

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 ?

View solution in original post

chinmayis865517
Level 2
Level 2
I want to parse table tags using jsoup from a page and print it on anothr page dynamically.
chinmayis865517
Level 2
Level 2
I want to parse table tags using jsoup from a page and print it on another page dynamically.
amogh-personal
Level 2
Level 2

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
Level 2
Level 2

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
Level 2
Level 2

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