{"id":5767,"date":"2014-04-06T20:17:46","date_gmt":"2014-04-06T20:17:46","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/04\/06\/datatable-sorting-when-using-ajax-datasource-collection-of-common-programming-errors\/"},"modified":"2014-04-06T20:17:46","modified_gmt":"2014-04-06T20:17:46","slug":"datatable-sorting-when-using-ajax-datasource-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/04\/06\/datatable-sorting-when-using-ajax-datasource-collection-of-common-programming-errors\/","title":{"rendered":"Datatable sorting when using Ajax datasource-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m new to Datatable and am trying to configure the Datatable, so that it fetches the data with ajax, displays it as a check-box, an anchor and a tab and allows a user to sort it. I have the ajax and formatting part, however when I try to sort the check-boxes it does nothing. I looked up the documented example and took the sort handler from it:<\/p>\n<p>Code for sorting:<\/p>\n<pre><code>\/* Create an array with the values of all the checkboxes in a column *\/\n        $.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {\n            var aData = [];\n            $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {\n                aData.push(this.checked == true ? \"1\" : \"0\");\n            });\n            return aData;\n        }\n<\/code><\/pre>\n<p>Code for creating the checkbox:<\/p>\n<pre><code>    $('#example').dataTable({\n        \"bProcessing\": true,\n        \"sAjaxSource\": \"sources\/myData.json\",\n        \"sAjaxDataProp\": \"items\",\n        \"aoColumns\": [\n            {\n                \"mData\": function (source, type, val) {\n                    if (source.Published)\n                        return '';\n                    else\n                        return '';\n\n                },\n                \/\/\"sType\": \"dom-checkbox\",\n                \"sSortDataType\": \"dom-checkbox\"\n                \/\/, \"bSortable\": false\n            },\n            { \"mData\": \"Author\" },\n            {\n                \"mData\": function (source, type, val) {\n                    return '' + source.$name + '';\n                }\n            }\n        ]\n    });\n<\/code><\/pre>\n<p>The sorting function ( <code>$.fn.dataTableExt.afnSortData['dom-checkbox']<\/code> is called and the data is returned, however the table isn&#8217;t updated. (the code works but not for ajax tables).<\/p>\n<p>Data sample:<\/p>\n<pre><code>{\n    \"items\": [\n        {\n            \"$name\": \"a\",\n            \"Href\": \"http:\/\/google.com\",\n            \"Author\": \"a\",\n            \"Published\": true\n        },\n        {\n            \"$name\": \"c\",\n            \"Href\": \"http:\/\/www.whiskas.at\/\",\n            \"Author\": \"a\",          \n            \"Published\": false\n        }\n    ]\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m new to Datatable and am trying to configure the Datatable, so that it fetches the data with ajax, displays it as a check-box, an anchor and a tab and allows a user to sort it. I have the ajax and formatting part, however when I try to sort the check-boxes it does nothing. I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5767","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=5767"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5767\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=5767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=5767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=5767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}