{"id":3014,"date":"2018-11-01T20:18:48","date_gmt":"2018-11-01T20:18:48","guid":{"rendered":"https:\/\/blog.paranoidprofessor.com\/?p=3014"},"modified":"2018-11-20T08:03:01","modified_gmt":"2018-11-20T08:03:01","slug":"more-fun-with-datatables","status":"publish","type":"post","link":"https:\/\/blog.paranoidprofessor.com\/index.php\/2018\/11\/01\/more-fun-with-datatables\/","title":{"rendered":"more fun with datatables"},"content":{"rendered":"

I actually don’t get a chance to do much GUI development but I did get a short stint on a project that used datatables.\u00a0 It is actually fascinating just how much of a facelift this does give your standard HTML.\u00a0 I did a small example of this in my blog entry software development the easy way<\/a>.<\/p>\n

Between normal javascript and datatables it is possible to actually make web applications that have a feel of your standard windows heavy client application.<\/p>\n

The only example I have to share today is the ability to do a bit more with datatables.\u00a0 In this case the need was to add totals of the contents of the table as a summary line.\u00a0 This isn’t so difficult if you already know what the total is but if you do not there is a small bit of code that will do the calculation for you.<\/p>\n

         function intVal ( i ) {\r\n\t\treturn typeof i === 'string' ?\r\n\t\ti.replace(\/[\\$,]\/g, '')*1 :\r\n\t\ttypeof i === 'number' ?\r\n         \t\ti : 0;\r\n            };\r\n\r\n\t$(document).ready(function() {\r\n\t   $('#example').DataTable( {\r\n           \"footerCallback\": function ( row, data, start, end, display ) {\r\n            var api = this.api(), data;\r\n\r\n            var ageTotal = api\r\n         \t.column( 3 )\r\n\t\t.data()\r\n       \t\t.reduce( function (a, b) {\r\n             return intVal(a) + intVal(b);\r\n             }, 0 );\r\n         \r\n             ageTotal = Number(ageTotal).toFixed(2);\r\n             ageTotal = ageTotal.toLocaleString();\r\n         \r\n             $( api.column( 3 ).footer() ).html(Number(ageTotal).toLocaleString());\r\n\t   },\r\n<\/pre>\n
If you add this code, actually not much different than many other examples on the internet to your web site then all of a sudden you will see your footer change with the new value(s).<\/p>\n
\"\"<\/p>\n
The code is not all that difficult to follow.\u00a0 You can use this particular function to put any values that you wish into the table footer.\u00a0 In my case it was a simple sum, but if you needed some fancy algorithm then this would be the place to put it.<\/p>\n
Download source for this example<\/p>\n
Download files<\/a><\/div>