data tables group

by Roshan Karunarathna

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<table id="mytable2" class="tableList" cellspacing="0" width="100%">
									</table>

CSS

tr.group,
			tr.group:hover {
				background-color: #ddd !important;
			}
			.groupTD{
				font-weight: bold;
			}

JavaScript

var $tableEle = $('#mytable2');
				var groupCol = 1;
				var $tableEle=$('#mytable2').DataTable({
				    ajax:'https://api.myjson.com/bins/1wyns',
					"columns":[
						{
							"data":null,
							"title":"No."
						},
						{
							"data":"province",
							"title":"Province"
						},
						{
							"data":"district",
							"title":"District"
						},
						{
							"data":"members",
							"title":"#Members"
						},
						{
							"data":"leaders",
							"title":"#Leaders"
						},
						{
							"data":"clubs",
							"title":"#Clubs"
						}
					],
					"autoWidth": true,
					"retrieve": true,
					"orderFixed": [
					[groupCol, 'asc']
				],
					"columnDefs": [{
					"orderable": false,
					"targets": [0]
				}, {
					"visible": false,
					"targets": [0,1]
				}],
					"drawCallback": function (settings) {
					var that = this;
					if (settings.bSorted || settings.bFiltered) {
						this.$('td:first-child', {
							"filter": "applied"
						}).each(function (i) {
							that.fnUpdate(i + 1, this.parentNode, 0, false, false);
						});
					}

					var api = this.api();
					var rows = api.rows({
						page: 'current'
					}).nodes();
					var rowsData = api.rows({
						page: 'current'
					}).data();

					var last = null;
					var subTotal = new Array();
					var grandTotal = new Array();
					var groupID = -1;

					api.column(groupCol, {
						page: 'current'
					}).data().each(function (group, i) {
						if (last !== group) {
							groupID++;
							$(rows).eq(i).before("<tr class=' group groupTR'><td colspan='1' class='groupTitle'>" + group + "</td></tr>");
							last = group;
						}

						//Sub-total of each column within the same grouping
						var val = api.row(api.row($(rows).eq(i)).index()).data(); //Current order index
						$.each(val, function (colIndex, colValue) {
							if (typeof subTotal[groupID] == 'undefined') {
								subTotal[groupID] = new Array();
							}
							if (typeof subTotal[groupID][colIndex] ==...