{"id":29108,"date":"2017-03-26T03:01:56","date_gmt":"2017-03-25T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29108"},"modified":"2017-03-26T20:16:52","modified_gmt":"2017-03-26T10:16:52","slug":"list-web-application-row-sorting-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-row-sorting-tutorial\/","title":{"rendered":"List Web Application Row Sorting Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Row Sorting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_sort.jpg\" title=\"List Web Application Row Sorting Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Row Sorting Tutorial<\/p><\/div>\n<p>Think <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'>&#8220;list&#8221;<\/a>, think &#8220;sort&#8221;, too.  Sorting a list is a very common, and often useful web application piece of functionality, as &#8220;sorting&#8221; often increases &#8220;order&#8221; for we humans.<\/p>\n<p>But, as with &#8220;order&#8221;, the idea of &#8220;sort&#8221; can be quite varied in the eyes of the users of your web application.  And also, think whether you want &#8230;<\/p>\n<ul>\n<li>choices between numerical sorting and alphabetic (is uppercase versus lowercase an issue?) &#8230; normal and\/or reversed<\/li>\n<li>sorts at various character positioning or delimiting within the data<\/li>\n<li>exceptions, perhaps<\/li>\n<\/ul>\n<p> &#8230; but, today, with our web application, we are just dealing with the first idea above, offering a <i>numerical sort<\/i> on that <strike>&#8220;Quantity or Weight&#8221;<\/strike>&#8220;Population&#8221; column data, and an alphabetic sort for any other column, with normal (<i>down<\/i> &#11015; arrow Emoji) and reversed (<i>up<\/i> &#11014; arrow Emoji) sorting modes in play.<\/p>\n<p>To show you what we mean here, we are taking the same input CSV &#8220;World Populous Country&#8221; population data we used with <a target=_blank title='Linux vi Buffer Sort Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-vi-buffer-sort-primer-tutorial\/'>Linux vi Buffer Sort Primer Tutorial<\/a> and entering it into our web application in the Country name alphabetical order it has in the data set, and allow the <strike>&#8220;Quantity or Weight&#8221;<\/strike>&#8220;Population&#8221; column&#8217;s new &#8220;sort&#8221; <i>up<\/i> and <i>down<\/i> arrow Emojis (for normal numerical sort and reverse numerical sort respectively), specifically the <i>up<\/i> arrow Emoji, to show sorted data from Most Populous Country to Least Populous Country, as you might be more interested in seeing, in real life.  You can simulate this yourself by clicking the <i>up<\/i> arrow Emoji next to <strike>&#8220;Quantity or Weight&#8221;<\/strike>&#8220;Population&#8221; table column heading &#8230;<\/p>\n<p><iframe onload=\"location.href='#wrapper';\" style='height:1700px;width:100%;' title='Most Populous Countries' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm?emailee=rmetcalfe15@gmail.com&#038;subject=Populous%20Countries&#038;wordsqw=Population&#038;wordsi=Country&#038;qw1=151000000&#038;i1=Bangladesh&#038;qw2=197000000&#038;i2=Brazil&#038;qw3=1347000000&#038;i3=China&#038;qw4=67800000&#038;i4=Congo&#038;qw5=82600000&#038;i5=Egypt&#038;qw6=87000000&#038;i6=Ethiopia&#038;qw7=63300000&#038;i7=France&#038;qw8=81800000&#038;i8=Germany&#038;qw9=1241000000&#038;i9=India&#038;qw10=238000000&#038;i10=Indonesia&#038;qw11=78000000&#038;i11=Iran&#038;qw12=60800000&#038;i12=Italy&#038;qw13=128000000&#038;i13=Japan&#038;qw14=115000000&#038;i14=Mexico&#038;qw15=162000000&#038;i15=Nigeria&#038;qw16=177000000&#038;i16=Pakistan&#038;qw17=96000000&#038;i17=Philippines&#038;qw18=143000000&#038;i18=Russia&#038;qw19=69500000&#038;i19=Thailand&#038;qw20=74000000&#038;i20=Turkey&#038;qw21=62700000&#038;i21=United%20Kingdom&#038;qw22=312000000&#038;i22=United%20States&#038;qw23=88000000&#038;i23=Vietnam'><\/iframe><\/p>\n<p>We remained just using client side HTML and Javascript for this, and all that precedes.  Here is the new Javascript function added today for sorting purposes &#8230;<\/p>\n<p><code><br \/>\nfunction sortby(direction,sio) {<br \/>\n  var nn, arrtosort=[], thisoneis, zero=0, dotp=-1, blanks=\"                    \", newoarrc='', newoarrdelim='';<br \/>\n  var idprefix=sio.id.replace('dsort_','').replace('usort_','');<br \/>\n  was_io=null;<br \/>\n  is_io=null;<br \/>\n  var inps=document.getElementsByTagName('input');<br \/>\n  for (var ninps=0; ninps&lt;inps.length; ninps++) {<br \/>\n    if (inps[ninps].id) {<br \/>\n      if (inps[ninps].id.toLowerCase().indexOf(idprefix.toLowerCase()) == 0 && inps[ninps].id != 'i0i' && inps[ninps].id.toLowerCase().replace(idprefix.toLowerCase(),\"\").substring(0,1) &gt;= \"1\" && inps[ninps].id.toLowerCase().replace(idprefix.toLowerCase(),\"\").substring(0,1) &lt;= \"9\") {<br \/>\n       if (eval(inps[ninps].id.replace(idprefix,\"\")) != maxrow) {<br \/>\n        thisoneis=\"         \" + oarray[-1 + eval(inps[ninps].id.toLowerCase().replace(idprefix.toLowerCase(),\"\"))];<br \/>\n        if (idprefix == \"qw\") {<br \/>\n          zero=0;<br \/>\n          if ((inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \"-\" || (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \".\" || ((inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &gt;= \"0\" && (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &lt;= \"9\")) {<br \/>\n           while (zero < eval(inps[ninps].value.length - 1) &#038;&#038; (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \"-\" || (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) == \".\" || ((inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &gt;= \"0\" &#038;&#038; (inps[ninps].value + \" \").substring(zero,eval(1 + zero)) &lt;= \"9\")) {\n            zero++;\n           }\n          }\n          if (zero != 0) {\n            dotp=inps[ninps].value.substring(0,zero).indexOf(\".\");\n            if (dotp == -1) {\n              arrtosort.push(blanks.substring(0,eval(10 - zero)) + inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n            } else {\n              arrtosort.push(blanks.substring(0,eval(10 - dotp)) + inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n            }\n          } else {\n            arrtosort.push(inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n          }\n        } else {\n          arrtosort.push(inps[ninps].value + \"~!`\" + thisoneis.slice(-8));\n        }\n       }\n      }\n    }\n  }\n  if (arrtosort.length &gt; 1) {\n    arrtosort.sort();\n    if (direction != 0) {\n     for (nn=0; nn&lt;arrtosort.length; nn++) {\n      newoarrc+=newoarrdelim + arrtosort[nn].split(\"~!`\")[1].trim();\n      newoarrdelim=',';\n     }\n    } else {\n     for (nn=eval(-1 + arrtosort.length); nn&gt;=0; nn--) {\n      newoarrc+=newoarrdelim + arrtosort[nn].split(\"~!`\")[1].trim();\n      newoarrdelim=',';\n     }\n    }\n    oarrc=newoarrc;\n    oarrdelim=',';\n    reordered=true;\n    oarray=eval(\"[\" + oarrc + \"]\");\n    var purl=decodeURIComponent(eurl.split('body=')[1]);\n    var sortbits=(purl + '&#038;').split('&#038;order=');\n    if (sortbits.length &gt; 1) {\n      location.href=purl.replace('&#038;order=' + sortbits[1].split('&#038;')[0], '&#038;order=' + encodeURIComponent('[' + oarrc + ']'));\n    } else {\n      location.href=purl + '&#038;order=' + encodeURIComponent('[' + oarrc + ']');\n    }\n  }\n}\n<\/code><\/p>\n<p>Also, with the changes today, we offer the \"table cell swapping\" functionality listed in an earlier blog posting in this thread.  Personally, we think the use would be rare, but perhaps if you have many columns to fill in and miss the order when doing this, perhaps this \"table cell swapping\" may be a \"cute\" bit of functionality to have.  We use the reasoning ...<\/p>\n<ul>\n<li>user has clicked into an HTML input type=text field that is not blank ... and so the Javascript global var<font size=1>iable<\/font> was_io is set to this HTML input type=text field object, for a first round of this, as distinct from global var<font size=1>iable<\/font> is_io being, albeit, briefly, on the second click (that we talk about below) ...<\/li>\n<li>user has not done any Emoji clicking, nor used the keyboard in any way (checked <b>via<\/b> ...<br \/>\n<code><br \/>\n&lt;body style='background-color:yellow;' onload='addlotsofrows();' <b>onkeyup='was_io=null; is_io=null;'<\/b>&gt;<br \/>\n<\/code><br \/>\n) ... when user has clicked into an HTML input type=text field that is not blank ... so we set  the Javascript global var<font size=1>iable<\/font> is_io's value to be swapped with  the Javascript global var<font size=1>iable<\/font> was_io's value (property)\n<\/li>\n<\/ul>\n<p>Today has our \"fourth draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html---GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html---GETME'>this way<\/a>, for sorting functionality purposes.  We hope it sets you to thinking even more about <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>lists<\/i>.<\/p>\n<hr>\n<p id='lwarst'>Previous relevant <a target=_blank title='List Web Application Row Swapping Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-row-swapping-tutorial\/'>List Web Application Row Swapping Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Row Swapping Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_swap.jpg\" title=\"List Web Application Row Swapping Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Row Swapping Tutorial<\/p><\/div>\n<p>Think <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'>\"list\"<\/a>, think \"order\".  So to have a web application involving a list where there is no possible way to reorder is not such a useful web application.<\/p>\n<p>Now, the word \"order\" can mean many things to many people, so you may want to consult with potential users about their desired approach to the myriad ideas out there for performing some sort of reordering process on their ...<\/p>\n<ul>\n<li>table rows<\/li>\n<li>table cells<\/li>\n<li>depending on some sort of sort criteria of data<\/li>\n<\/ul>\n<p> ... the list ... chortle, chortle ... goes on and on.<\/p>\n<p>We opt, today, for some work on that \"table rows\" idea above, augment existant functionality last talked about with <a title='List Web Application Genericization Tutorial' href='#lwagt'>List Web Application Genericization Tutorial<\/a> as shown below.  Though we like a drag and drop approach to the Emojis, and tomorrow's \"edition\" may have this, this \"drag and drop\" is not that good for mobile device users, so instead, we have additionally attached to the code, some dynamically added HTML select element dropdowns in that table header record where you can define some row swapping criteria. Also available as a mobile device (or non-mobile device) alternative idea to \"drag and drop\" is the \"two discrete clicks\" idea we allow for in the methodology used for our row swapping \"venture\" today.<\/p>\n<p>That leaves us with our \"third draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the (still purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html--GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html--GETME'>this way<\/a>.  Hope it sets you to thinking more about <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>lists<\/i>.<\/p>\n<hr>\n<p id='lwagt'>Previous relevant <a target=_blank title='List Web Application Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-genericization-tutorial\/'>List Web Application Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_more.jpg\" title=\"List Web Application Genericization Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Genericization Tutorial<\/p><\/div>\n<p>Genericization jobs, at least for us, are an invitation for second phase design.  We like to put down an initial design, and often see that it could be \"ever so much\" more generic, so we set aside thinking and designing to that end.<\/p>\n<p>What is the \"genericization\" improvements we could make to our \"early days\" \"Make a List\" web application.  Well, yesterday, it felt like something designed for a ...<\/p>\n<ul>\n<li>shopping list ... but what about other list ideas like ...<\/li>\n<li>list of countries with some informational columns<\/li>\n<li>list of planets with orbital and environmental information<\/li>\n<li>list of insects with habitat, size, reproduction, social setup information<\/li>\n<\/ul>\n<p>?  Are you getting the gist?  Well, we offer the user the chance, just for that period where they have not yet entered any record Item information yet, allow for a mechanism that can add up to six new columns of information (but not changing \"Quantity or Weight\" and \"Item\") to augment what your list contains.  Guess you'd classify this as a data driven genericization.<\/p>\n<p>We think data driven genericizations are the most satisfying to do because the heart of any good web application revolves around data.  It's just that, as you might guess, we are fond here, of many different approaches to data derivation and reporting, from the simple ephemeral forms to set in stone database approaches.  It is up to you (hoo?!), the programmer, and the client, to determine the permanence of that data, in that web application, or mobile application, or desktop application.<\/p>\n<blockquote><p>\nNo data, though, we find, very often, a dull program maketh.\n<\/p><\/blockquote>\n<p>The method we use, in practice to allow users to add columns we've never done before in our recollection. We ...<\/p>\n<ul>\n<li>just until that first Item cell's HTML input type=text's <i>onblur<\/i> event logic is instigated offer 6 new HTML input type=text table header record places, either side of the existant 3 columns, where the user can define new columns (and their names) in that classic spreadsheet and relational database thought ...<br \/>\n<code><br \/>\nname=value<br \/>\n<\/code>\n<\/li>\n<li>close up shop and Javascript DOM change things to readonly ways they will remain, once the user instigates that first Item cell's HTML input type=text's <i>onblur<\/i> event logic<\/li>\n<\/ul>\n<p> ... which also felt like a kind of satisfying way of both helping people out with more complex reports, and making it fairly obvious that it is optional, and that if you are just there for that first \"shopping list\" type vision of usage, go for it, because there is nothing different in what these users have to do.<\/p>\n<p>The fundamental rearrangement for HTML and Javascript code was that a \"template\" row that was once hardcoded (as in the commented out <font color=red>\/\/<\/font> codelines below), and called into play when adding a new table record (ie. row), is now based on a <font color=blue>dynamic <i>str1<\/i> variable<\/font>, that is managed by the event logic of the <i>onblur<\/i> events of those new table header record HTML input type=text elements as well.<\/p>\n<p><code><br \/>\n    <font color=red>\/\/rec=\"&lt;tr id='tr\" + maxrow + \"'&gt;&lt;td&gt;&lt;span&gt;\";<\/font><br \/>\n    <font color=blue>rec=str1.replace(\/colspan='1'\/g,\"colspan='one'\").replace(\/colspan=\"1\"\/g,'colspan=\"one\"').replace(\/colspan=1\/g,\"colspan=one\").replace(\/1\/g,maxrow).replace(\/colspan='one'\/g,\"colspan='1'\").replace(\/colspan=\"one\"\/g,'colspan=\"1\"').replace(\/colspan=one\/g,\"colspan=1\").split('&lt;span&gt;')[0] + '&lt;span&gt;';<\/font><br \/>\n    for (icoi=0; icoi&lt;coi.length; icoi++) {<br \/>\n      rec+='&#';<br \/>\n      rec+=('' + en[eval(coi.substring(icoi,eval(1 + icoi)))]);<br \/>\n      rec+=';&#';<br \/>\n      rec+='8419';<br \/>\n      rec+=\";\";<br \/>\n    }<br \/>\n    <font color=red>\/\/rec+=\"&lt;\/span&gt;&lt;\/td&gt;&lt;td&gt;&lt;input id='qw\" + maxrow + \"' name='qw\" + maxrow + \"' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td&gt;&lt;input style='width:90%;' onblur='process(this);' id='i\" + maxrow + \"' name='i\" + maxrow + \"' value=''&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;\/tr&gt;\" + String.fromCharCode(10); \/\/ + \"&lt;tr id='tr\" + eval(1 + maxrow) + \"' style='display:table-row;'&gt;&lt;\/tr&gt;\";<\/font><br \/>\n    <font color=blue>rec+=\"&lt;\/span&gt;\" + str1.replace('tr1','tr' + maxrow).split('&lt;\/span&gt;')[1].replace(\/colspan='1'\/g,\"colspan='one'\").replace(\/colspan=\"1\"\/g,'colspan=\"one\"').replace(\/colspan=1\/g,\"colspan=one\").replace(\/1\/g,maxrow).replace(\/colspan='one'\/g,\"colspan='1'\").replace(\/colspan=\"one\"\/g,'colspan=\"1\"').replace(\/colspan=one\/g,\"colspan=1\");<\/font><br \/>\n<\/code><\/p>\n<p>So here is the \"second draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm'>live run<\/a> link pointing at the (still purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html-GETME'>mylist.htm<\/a> changed in <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html-GETME'>this way<\/a>.  Hope it sets you to thinking more about <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>lists<\/i>.<\/p>\n<hr>\n<p id='lwapt'>Previous relevant <a target=_blank title='List Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-primer-tutorial\/'>List Web Application Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.jpg\" title=\"List Web Application Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Primer Tutorial<\/p><\/div>\n<p>We're starting out pretty simply, but we hope, pretty usefully, with today's new web application, which is \"Make a List\" via ...<\/p>\n<ul>\n<li>an Emoji numbering system<\/li>\n<li>a Quantity or Weight measurement entered by the user interactively<\/li>\n<li>an Item entered by the user interactively<\/li>\n<\/ul>\n<p>Pretty simple, huh?  A little more complex is a facility to be a bit \"accountable\" and a bit \"sharing\" with our HTML and Javascript and CSS web application.   So we turn to an ...<\/p>\n<ul>\n<li>email client approach to sending the list off to an email recipient ... via ...<\/li>\n<li>the clicking of an HTML <i>a<\/i> link whose ....<\/li>\n<li><i>href<\/i> property is of the form <i>mailto:[emailee]?subject=[subject]&body=[URLpointingTOyourLIST]<\/i><\/li>\n<\/ul>\n<p>And so, we hope you see that there are two aspects to the method by which we construct our list via Javascript DOM techniques, those being ...<\/p>\n<ul>\n<li>with our dynamically unfolding HTML table (and tbody) of rows (tr) and sets of 3 cells (td x 3) we don't want to show any unfilled out rows (tr) so we could either ...\n<ol>\n<li>only add a row (tr) when the Item is filled out (which we tried for a while using a linked list of HTML div elements at the end of row (tr) elements) and rejected for ...<\/li>\n<li>allow for a lot of rows (tr) that are invisible (style=display:none;) until we need them, at the HTML Item input element's <i>onblur<\/i> to a non-blank <i>value<\/i> event, when they become (style=display:table-row;) (do you remember something similar with <a target=_blank title='Middle Word Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/middle-word-game-primer-tutorial\/'>Middle Word Game Primer Tutorial<\/a>?)<\/li>\n<\/ol>\n<\/li>\n<li>we need to cater for (big long, presumably) email URLs arriving at this same web application ... our method of \"sharing\" (that we often use) ... and this involves a web application automated (programmatic) simulation of what the <i>onblur<\/i> logic is above, as much as anything, because ...\n<ol>\n<li>speaking personally, there is a sense of satisfaction with event-driven programming, when you access some event logic from two or more different modes of entry<\/li>\n<li>we don't like to reinvent wheels, so this design makes some good sense<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>So here is the \"first draft\" <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html'>live run<\/a> link pointing at the (so far purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html_GETME'>mylist.html<\/a> to start the ball rolling.  But it is doubtful that we'll settle on this first draft, a <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>list<\/i><\/a> being one of the most useful data container in programming \"<font size=1>h<\/font><font size=2>i<\/font><font size=3>s<\/font><font size=4>t<\/font><font size=5>o<\/font><font size=6>r<\/font><font size=7>y<\/font><font size=8><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=2VSYmGSJtCA'> ... and beyond!<\/a><\/font>\".<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d29041' onclick='var dv=document.getElementById(\"d29041\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/list\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29041' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d29051' onclick='var dv=document.getElementById(\"d29051\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29051' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d29074' onclick='var dv=document.getElementById(\"d29074\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/order\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29074' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d29108' onclick='var dv=document.getElementById(\"d29108\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29108' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Think &#8220;list&#8221;, think &#8220;sort&#8221;, too. Sorting a list is a very common, and often useful web application piece of functionality, as &#8220;sorting&#8221; often increases &#8220;order&#8221; for we humans. But, as with &#8220;order&#8221;, the idea of &#8220;sort&#8221; can be quite varied &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-row-sorting-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1580,290,354,364,367,576,652,710,2076,997,1075,1173,2156,1238,1319,1402],"class_list":["post-29108","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cell","tag-data","tag-dom","tag-drag-and-drop","tag-dropdown","tag-html","tag-javascript","tag-list","tag-order","tag-programming","tag-row","tag-sort","tag-swap","tag-table","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29108"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=29108"}],"version-history":[{"count":17,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29108\/revisions"}],"predecessor-version":[{"id":29142,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29108\/revisions\/29142"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}