How to add sortable columns and search field to a table in html output

Post by **kj_rk** » Sat Apr 23, 2022 8:59 pm

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

Post by **kj_rk** » Thu Apr 28, 2022 1:32 am

Any suggestions to accomplish this?

alin · Post by **alin** » Fri Apr 29, 2022 11:21 am

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

Post by **kj_rk** » Mon May 02, 2022 7:19 pm

Thank you, Alin!
That worked!

Post by **LASSE_MLE** » Mon Nov 13, 2023 11:31 am

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!

Post by **LASSE_MLE** » Mon Nov 13, 2023 3:11 pm

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 ?

alin · Post by **alin** » Mon Nov 13, 2023 4:14 pm

Hello,

I would have chosen the same approach.

Regards,
Alin

Post by **LASSE_MLE** » Mon Nov 13, 2023 4:26 pm

Thank you for your feedback Alin!

How to add sortable columns and search field to a table in html output

How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output

Re: How to add sortable columns and search field to a table in html output