I am looking for a code which could be added to table.html in order to make the WebViewer “table” sortable by pushing the column header.
I found something likewise from https://stackoverflow.com/questions/10683712/html-table-sort/51648529 but as I am very bad with HTML, my implementation to table.html did not work.
I tried the below approach which was described starting from the middle of that page, by adding click handler code, sortTable function, table2data function and data2table function, all into the script block of table.html. But I just get an empty WebViewer after adding those into table.html:
The basic process is:
- add a click handler to each table header
- the click handler notes the index of the column to be sorted
- the table is converted to an array of arrays (rows and cells)
- the data from the sorted array is inserted back into the HTML table
Thx for your answer.
If I could ask you to explain some small details.
Can the code in the function sortTable() be copied as such, or are there some parts that need to be adapted to the table.html?
Especially I am not so sure about these two rows in the function:
let table = document.querySelector("#table")
let children = [...table.children]
That code is from an earlier example that uses flexbox.
You must have mistaken.
1st example is based on W3.JS HTML sort
3rd example is flexbox-based
So which one to use?
That code works perfectly well if I implement it with table data:
sort_code_with_table.txt (2.3 KB)
The problem is to intergrate that code to be used with dynamic table, inside this code based on table.html:
table_colors_button.txt (2.6 KB)
I am so beginner with html. There is not much to tweak I guess in order to get the sort code working inside table.html.
Currently, if I implement the sort code (without table data of course) into the table.html based code, it just results an empty page in my AI2 app. Without sort code in table.html my app works fine.
I am back again with this. Now I have a working code for sorting.
The only problem which is left is, that the app should first sort the column in ascending order and with the 2nd press it should sort in descending order. Now the 1str press works and sorts ok, but the 2nd press is working in somehow funny way and sorting only other columns than that one which was pressed.
The html asset code however works fine if I load it via browser e.g. Chrome; it sorts the data in both asc&desc fine.
Could this phenomen be due to some options that I should set in the AI designer, for the WebViewer component or the screen component??
You can try the my html asset test code in browser. Just save the attached txt file and rename it to .html, then paste the filepath into browser.
sort_reverse_working_v2.txt (1.9 KB)