{"id":820,"date":"2008-05-19T13:43:56","date_gmt":"2008-05-19T13:43:56","guid":{"rendered":"http:\/\/www.bartbusschots.ie\/blog\/?p=820"},"modified":"2017-03-05T22:26:05","modified_gmt":"2017-03-05T22:26:05","slug":"making-sorttable-work-with-ajax","status":"publish","type":"post","link":"https:\/\/www.bartbusschots.ie\/s\/2008\/05\/19\/making-sorttable-work-with-ajax\/","title":{"rendered":"Making sorttable Work With AJAX"},"content":{"rendered":"<p>I&#8217;ve blogged about how great <a href=\"http:\/\/www.kryogenix.org\/code\/browser\/sorttable\/\" target=\"_blank\">sorttable<\/a> is <a href=\"http:\/\/www.bartbusschots.ie\/blog\/?p=466\">before<\/a>. I use it a lot in work and people love it. However, because of the way sort-table works normally it won&#8217;t work with tables that are not in the document when the <code>onload<\/code> event for the document triggers. What does that mean in real terms? It means that if you use AJAX to render a table it won&#8217;t be sortable even if you include the <code>sorttable.js<\/code> file and set the class of the table to <code>sortable<\/code>. A quick scan of the source code showed me the answer, you have to manually call the function <code>sorttable.makesortable()<\/code> passing it the table you just got back from AJAX. The simplest way to do this is to give your table an ID and then use:<\/p>\n<pre class=\"lang:js decode:true \">\r\nsorttable.makesortable(document.getElementById('the_table_id'));\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve blogged about how great sorttable is before. I use it a lot in work and people love it. However, because of the way sort-table works normally it won&#8217;t work with tables that are not in the document when the onload event for the document triggers. What does that mean in real terms? It means [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[12,16],"tags":[420],"series":[],"class_list":["post-820","post","type-post","status-publish","format-standard","hentry","category-computers-tech","category-programming","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7t9xK-de","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/posts\/820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/comments?post=820"}],"version-history":[{"count":2,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/posts\/820\/revisions"}],"predecessor-version":[{"id":14537,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/posts\/820\/revisions\/14537"}],"wp:attachment":[{"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/media?parent=820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/categories?post=820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/tags?post=820"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.bartbusschots.ie\/s\/wp-json\/wp\/v2\/series?post=820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}