Create sortable table rows in webhelp

Questions about XML that are not covered by the other forums should go here.
akmenting
Posts: 12
Joined: Fri Sep 09, 2016 11:22 pm

Create sortable table rows in webhelp

Post by akmenting »

I can only find tutorials in Oxygen for sorting rows in the Author. How can I create sorting in webhelp output so that the user can click a column head and sort the row entries in ascending or descending order?
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Create sortable table rows in webhelp

Post by alin »

Hello,

You can have a look at http://tablesorter.com/. This is a jQuery plugin that you can include in you WebHelp output in order to have sortable tables.

In order to refer a custom JavaScript file in the WebHelp Responsive output HTML files please follow these steps:
  1. Include the script declaration into an well-formed XML file. For example the content of the XML file should look like:

    Code: Select all

    <script type="text/javascript" src="${oxygen-webhelp-output-dir}/my-script.js"/>
    Note: Note that the example above uses the ${oxygen-webhelp-output-dir} macro in order specify the path of the referenced JavaScript file relative to the output directory.
    Note: If you want to reference multiple JavaScript files, place the <script> elements within a <div> element. For example:

    Code: Select all

    <div>
    <script type="text/javascript" src="http://www.example.com/my-script1.js"/>
    <script type="text/javascript" src="${oxygen-webhelp-output-dir}/my-script2.js"/>
    </div>
  2. Edit the WebHelp Responsive transformation scenario and set the value for the webhelp.fragment.head parameter to the absolute path of the XML file at step 1.
    Note: If you want to insert the JavaScript reference in another location within the HTML page you can find the complete list of available parameters here: https://www.oxygenxml.com/doc/versions/ ... ders_usage
In order to copy JavaScript resources to the output directory follow these steps:
  1. Place all your JavaScript resources in the same directory.
  2. Edit the WebHelp Responsive transformation scenario and set the value for the webhelp.custom.resources parameter to the absolute path of the directory at step 1.
    Note: All files from this directory will be copied to the root of the WebHelp output.
Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
akmenting
Posts: 12
Joined: Fri Sep 09, 2016 11:22 pm

Re: Create sortable table rows in webhelp

Post by akmenting »

Thank you!
Post Reply