Sorting in WebViewer by column using table.html code

MIT App Inventor Help
1

Ref. https://puravidaapps.com/table.php

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:

–clip–
The basic process is:

  1. add a click handler to each table header
  2. the click handler notes the index of the column to be sorted
  3. the table is converted to an array of arrays (rows and cells)
  4. that array is sorted using javascript sort function
  5. the data from the sorted array is inserted back into the HTML table
    –clap–
  • Tommi S.
2

The last example in the link you provided seems to be the one to use. I would suggest you set up an example with some dummy data to get that working in an html file, then transfer it across to your “table .html” file. This should make it easier to see where everything needs to go. Everything should be run “after” the dynamic table has been built by the javascript in table.html.

3

The best place to find your answer:
https://www.w3schools.com/html/default.asp

4

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:
–clip–

let table = document.querySelector("#table")
  let children = [...table.children]

–clap–

5

That code is from an earlier example that uses flexbox.

Scroll to the last post for an example using javascript

6

You must have mistaken.

1st example is based on W3.JS HTML sort
2nd example is Javascript
3rd example is flexbox-based

So which one to use?

7

This one !!

8

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.

  • Tommi S.
9

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.

The difference with this test code and the actual dynamic asset code is, that this test code includes the sort-reverse attribute. I could not figure out how it should be implemented in the javascript part, so this may also affect to the issue.

sort_reverse_working_v2.txt (1.9 KB)