{"id":9094,"date":"2014-08-19T05:02:44","date_gmt":"2014-08-18T19:02:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9094"},"modified":"2014-08-19T05:02:44","modified_gmt":"2014-08-18T19:02:44","slug":"jquery-sortable-table-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/jquery-sortable-table-primer-tutorial\/","title":{"rendered":"jQuery Sortable Table Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/SortableTable\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"jQuery Sortable Table Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/SortableTable\/Sortable_Table.jpg\" title=\"jQuery Sortable Table Primer Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">jQuery Sortable Table Primer Tutorial<\/p><\/div>\n<p>A lot of the things people like about the Web are to do with JavaScript and client-side activities. Adding to that experience are Javascript libraries packed full of features. Probably the best known of these is jQuery.<\/p>\n<p><p>Read more about the powerful jQuery Javascript library <a target=_blank title='jQuery spiritual home' href='http:\/\/jquery.com\/'>here<\/a> (at its spiritual home) and <a target=_blank title='jQuery information' href='http:\/\/en.wikipedia.org\/wiki\/jQuery'>here<\/a> (at Wikipedia).<\/p>\n<p>Regarding this topic I really like <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> pages 437 to 441. The code in this book was followed with quite a few changes. Why change a good thing &#8230; welllllll, want to show you some concepts\/ideas\/<strike>buffoonery<\/strike> which we&#8217;d like to present in pointy form below (you thought we were going to say &#8220;above&#8221; didn&#8217;t you? &#8230; go on! &#8230; admit it):<\/p>\n<ol>\n<li>Can include &#8220;old style&#8221; Javascript <i>&#8220;body onload&#8221;<\/i> code within jQuery <i>ready<\/i> functionality (just checking &#8230; because, personally, feel shy about combining the two worlds, but there is nothing wrong doing this, as we do today) &#8230;<\/li>\n<li>Function <i>onloading()<\/i> which is &#8220;old style&#8221; Javascript is the first thing called from jQuery <i>ready<\/i> code &#8230; why?<\/li>\n<ul>\n<li>First off please refer to today&#8217;s downloadable HTML\/Javascript\/jQuery code you could call <a target=_blank title='jQuery information' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/SortableTable\/conjunction_sortable_table.html_GETME' title='conjunction_sortable_table'>conjunction_sortable_table.html<\/a><\/li>\n<li>Sometimes you want to use Javascript DOM techniques to dynamically load your document.body.innerHTML contents &#8230; so that, perhaps, you can read off a data source of some kind &#8230; wouldn&#8217;t PHP be sooooo great here?! &#8230; <i><b>Subtext translation: <\/b><\/i> the programmer is lazy and wanted to save coding time by taking an array from the previous tutorial called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8555' title='HTML\/Javascript Sentence Conjunction Game Tutorial'>HTML\/Javascript Sentence Conjunction Game Tutorial<\/a><\/li>\n<li>The jQuery <i>ready<\/i> code fires at the webpage&#8217;s body <i>onload<\/i> event, and you lose the ability to go <i>&lt;body onload=&#8217;onloading();&#8217;&gt;<\/i> but this doesn&#8217;t stop you plugging in onloading() up the top of your <i>ready<\/i> code &#8230; are you still awake?!<\/li>\n<li>Alternative approach is static HTML, and this is presented to you, but is commented out down the bottom of our <a target=_blank title='jQuery information' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/SortableTable\/conjunction_sortable_table.html_GETME' title='conjunction_sortable_table'>code<\/a> provided today &#8230; by the way, HTML comment goes &lt;!&#8211; &#8230; &#8211;&gt;<\/li>\n<li> &#8230; and how was this derived when a View->Page Source doesn&#8217;t show it? &#8230;<\/li>\n<li> &#8230; use Firebug (or something like it) and point at the body tag and use &#8220;Copy innerHTML&#8221; to derive this (as per the tutorial&#8217;s <a target=_blank title='Tutorail picture' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/SortableTable\/Sortable_Table.jpg'>picture<\/a>)<\/li>\n<\/ul>\n<li>Use of <i>cursor:pointer<\/i> style property to make a <i>span<\/i> tag, within an <i>h1<\/i> tag act like an <i>a<\/i> tag<\/li>\n<li>Recall of ready function for the addsome() Javascript bit awkward, in that code is repeated<\/li>\n<ul>\n<li>Maybe start reading <a target=_blank title='http:\/\/stackoverflow.com\/questions\/999092\/can-i-call-the-function-ready-again-in-jquery' href='http:\/\/stackoverflow.com\/questions\/999092\/can-i-call-the-function-ready-again-in-jquery'>http:\/\/stackoverflow.com\/questions\/999092\/can-i-call-the-function-ready-again-in-jquery<\/a> to see if you can do better<\/li>\n<\/ul>\n<\/ol>\n<p> Click <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/SortableTable\/'>on picture above<\/a> to go to jQuery page for a (live run) tutorial on the jQuery concept called Sortable Table. <\/p>\n<p>Link to jQuery information <a target=_blank title='jQuery information' href='http:\/\/en.wikipedia.org\/wiki\/jQuery'> &#8230; via Wikipedia<\/a>.<\/p>\n<p>Link to jQuery spiritual home page <a target=_blank title='jQuery spiritual home' href='http:\/\/jquery.com\/'> &#8230; via jQuery Foundation<\/a>.<\/p>\n<p>Link to the great third-party jQuery Sortable Table code is available from the <a target=_blank title='GitHub source control' href='https:\/\/github.com\/'>GitHub<\/a> source control resource <a target=_blank title='jQuery Sortable Table download from GitHib' href='https:\/\/github.com\/christianbach\/tablesorter'>here<\/a> which is a link from <a target=_blank title='jQuery Sortable Table project' href='http:\/\/tablesorter.com\/docs\/'>here<\/a> &#8230; thanks heaps &#8230; isn&#8217;t Open Source great?!<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>The tutorial picture today features the <a target=_blank href='http:\/\/www.mozilla.org\/en-US\/firefox\/new\/' title='Firefox home page'>Firefox<\/a> web browser and a very useful add-on called <a target=_blank title='Firebug home page' href='https:\/\/getfirebug.com\/'>Firebug<\/a> which you may want more information about <a target=_blank title='Firebug tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firebug'>here<\/a>, which is commonly used to debug client-side Javascript and HTML.   As for today&#8217;s usage, Firebug is also extremely useful in deconstructing how a web page was created.   The other simple wonderful tool for this is the web browser&#8217;s equivalent menu command like View->Page Source (or sometimes equivalent of right-click Page Source).   Firebug has a sister product called <a target=_blank title='FirePHP home page' href='http:\/\/www.firephp.org\/'>FirePHP<\/a> which helps debug server-side PHP and Ajax <a target=_blank title='FirePHP tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firephp'>work<\/a>.<\/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='#d9094' onclick='var dv=document.getElementById(\"d9094\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=jQuery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9094' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A lot of the things people like about the Web are to do with JavaScript and client-side activities. Adding to that experience are Javascript libraries packed full of features. Probably the best known of these is jQuery. Read more about &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/jquery-sortable-table-primer-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,17,33,37],"tags":[281,327,354,396,439,441,494,495,576,652,663,877,997,1174,1176,1238,1319],"class_list":["post-9094","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gui","category-software","category-tutorials","tag-css","tag-did-you-know","tag-dom","tag-esl","tag-firefox","tag-firefug","tag-git","tag-github","tag-html","tag-javascript","tag-jquery","tag-open-source","tag-programming","tag-sortable","tag-source-control","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9094"}],"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=9094"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9094\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=9094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=9094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=9094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}