Page 1 of 1
How to add sortable columns and search field to a table in html output
Posted: Sat Apr 23, 2022 8:59 pm
by kj_rk
Hi,
I am trying to figure out if there is a property for the table element that can render tables as sortable and searchable when transformed!
Just like the behavior obtained as a result of adding “sortable, searchable” values to the @class attribute of an HTML <table> element.
Thanks
kj_rk
Re: How to add sortable columns and search field to a table in html output
Posted: Thu Apr 28, 2022 1:32 am
by kj_rk
Any suggestions to accomplish this?
Re: How to add sortable columns and search field to a table in html output
Posted: Fri Apr 29, 2022 11:21 am
by alin
Hello,
You can use the
DataTables JQuery plugin to make your tables sortable and filterable.
The following procedure describes how to include
Data Tables in the WebHelp Responsive output:
https://www.oxygenxml.com/doc/versions/ ... s-amd.html
Here is an example of how the tables would look like:
Regards,
Alin
Re: How to add sortable columns and search field to a table in html output
Posted: Mon May 02, 2022 7:19 pm
by kj_rk
Thank you, Alin!
That worked!
Re: How to add sortable columns and search field to a table in html output
Posted: Mon Nov 13, 2023 11:31 am
by LASSE_MLE
Hello Alin!
Thanks you for this (now quite old) post, it made my day last Friday.
The output is fantastic!
One small question though, is it possible to apply the script only to specific tables ? I mean, in our WebHelp document there are a lot of tables but most of them only embed just a few lines. For these the filtering stuff is a bit useless.
My idea was to tag the specific table with something like
Code: Select all
<table frame="all" outputclass="FilteredTable">
But I do not understand how to apply the script only to the topics that have these kind of tag?
In my opt file, I've added the
Code: Select all
<fragment placeholder="webhelp.fragment.head" file="html-fragments/data-tables-script-fragment.xml"/>
line. But this apply for all the generated pages. And I do not know how to add data to limit application...
Hope you can help me with this!
Re: How to add sortable columns and search field to a table in html output
Posted: Mon Nov 13, 2023 3:11 pm
by LASSE_MLE
I think I've found something. When I change the HTML fragment to:
Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="${oxygen-webhelp-template-dir}/resources/DataTables/datatables.css"/>
<script src="${oxygen-webhelp-template-dir}/resources/DataTables/DataTables-1.13.7/js/jquery.dataTables.js" defer="true"/>
<script>
<!--
window.addEventListener("DOMContentLoaded", (event) => {
$('.table.FilteredTable').DataTable(
{
order: [],
columnDefs: [
{ className: "dt-head-center dt-body-left", targets: "_all" }
]
}
);
});
//-->
</script>
</head>
</html>
Only the tables with outputclass="FilteredTable" take the template.
Is that the solution? Or is there something smarter ?
Re: How to add sortable columns and search field to a table in html output
Posted: Mon Nov 13, 2023 4:14 pm
by alin
Hello,
I would have chosen the same approach.
Regards,
Alin
Re: How to add sortable columns and search field to a table in html output
Posted: Mon Nov 13, 2023 4:26 pm
by LASSE_MLE
Thank you for your feedback Alin!