Sorting in WebViewer with html/javascript mixes the sorted record contents

MIT App Inventor Help
1

My WebViewer app is fetching data from www-server database.
The data can be sorted in WebViewer by columns.
But after sorting, the data content does not get sorted however, it remains on the original row/record.

E.g. if we take a look at the data record which belongs to ID 4 (on row #4).
kuva

If we sort the WebViewer data according to STATUS, the ID 4 record moves to the row #2.
But the record content (which should be seen by clicking on the correspondent row), remains on the original row #4.
kuva

So as a result of sorting, rows 2 and 4 changed places in WebViewer but their contents did not.

How to get the contents inlcuded with sorting?
Should I reload the content from my www -database using either "when WebViewer.PageLoaded" or "when WebViewer.WebViewStringChange" functions?

(note:sorting is handled in the table_color_button_filter_reverse_v3.html)

kuva
kuva801×172 18.9 KB

kuva
kuva808×454 63.7 KB

kuva
kuva751×390 43.8 KB

I am now not quite sure whether I should fix this in the html/java script or in the AppInventor code "when WebViewer.WebViewStringChange" section?

2

You do not show the html or javascript, or an example of the data (results output is not in the list?)

4

The html javascript attached as text format.

table_colors_button_filter_reverse_v3.txt (6.3 KB)

5

I will have to have a closer look....all I can suggest at the moment is that when selecting a row, you are returning data from the original table, not the sorted one. Need to work through the code to figure it out though....

6

In your javascript, you are returning ONLY the index of the row to the webviewstring.
In your app, the list/table data has NOT been sorted, therefore the index will return the data from the original position of the index.

If you use:

var picked = this.innerHTML.replace(/<td>/g, "").replace(/<\/td>/g, delimiter).replace(/(\s+)?.$/, '');
window.AppInventor.setWebViewString(picked);

instead of:

window.AppInventor.setWebViewString(this.rowIndex + 1);

then all the data in the selected row will be returned, comma separated. You can then use this to find the original row in your list in the app.

7

I also find, with the code that is there, on the first click to sort a column, it just reverses it (no sorting), on a second click you then get the sort. Is this what you want ?

8

Hi,
thanks for your reply and sorry for the delay for answering (job related issues).

There is something odd in the replacement clauses because I always get this argument error from every row click even without sorting:

Screenshot_20200902-103742
Screenshot_20200902-1037421080×2280 433 KB

Secondly, you are right about that the 1st click only reverses the rows and only after the 2nd click it sorts. A bit annoying and not exactly what I want but I can live with that. I tried to find out where in the html code this happens but I am not sure. If you can point if out to me it would be great :slight_smile:

9

You will need to explain that a bit more, or provide your relevant blocks, example data, etc.

11

Could you please explain these replacements that you suggested earlier? I might then figure out what is wrong there.

var picked = this.innerHTML.replace(/<td>/g, "").replace(/<\/td>/g, delimiter).replace(/(\s+)?.$/, '');
12

This was already there in the original table script code from Taifun. What it does is grab the row that has been clicked, then removes all the html formatting and tags in order to return the base data.

For example, converts:

<td>Hello</td><td>World<td>;

to

Hello,World
13

Ok.

How do you then refer to the row data as it is?
I mean, give the var "picked" the actual row (html) data as a value?

14

Try this, without any replacements

15

Here's another idea to sort a table using JavaScript.