DataTable population

DataTable.md

DataTable

#CSS

th.sorting:after {
	content: url('themes/default/images/arrow.gif');
}
th.sorting_asc:after {
	content: url('themes/default/images/arrow_up.gif');
}
th.sorting_desc:after {
	content: url('themes/default/images/arrow_down.gif');
}

#HTML

<table cellpadding="0" cellspacing="0" border="0" class="list view" id="ViewApiLog_dataTable" width="100%">
	<thead>
		<tr>
			<th height="20">Seq</th>
			<th height="20">Method</th>
			<th height="20">Path</th>
			<th height="20">HTTP Status</th>
			<th height="20">Request Date Time</th>
			<th height="20">ResponseDate Time</th>
			<th height="20">Request Body</th>
			<th height="20">Response Body</th>
		</tr>
	</thead>
</table>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" class="init"></script>

#JAVASCRIPT

$(document).ready(function() {
	SUGAR.ajaxUI.showLoadingPanel();
	var URL = 'index.php?module=Administration&action=FetchAPILog';
	$('#ViewApiLog_dataTable').dataTable( {
		"dom": '<<t><"footer-tool"ip>>',
		"pagingType": "full",
		"searching": false,
		"stripeClasses": [ 'oddListRowS1', 'evenListRowS1' ],
	 	"processing": true,
		"serverSide": true,
		"pageLength": <?php echo $col_limit;?>,
		"ajax":{
			url :URL, // json datasource
			type: "post",  // method  , by default get
			data : {
				"sugar_body_only":1,
				"method": "getapilogdetails",
				"interface": '<?php echo $_REQUEST["interface"]?>',
				"method_type": '<?php echo $_REQUEST["method_type"]?>',
				"http_status": '<?php echo $_REQUEST["http_status"]?>',
				"from_date": '<?php echo $_REQUEST["from_date"]?>',
				"from_date_hours": '<?php echo $_REQUEST["from_date_hours"]?>',
				"from_date_minutes": '<?php echo $_REQUEST["from_date_minutes"]?>',
				"from_date_seconds": '<?php echo $_REQUEST["from_date_seconds"]?>',
				"to_date": '<?php echo $_REQUEST["to_date"]?>',
				"to_date_hours": '<?php echo $_REQUEST["to_date_hours"]?>',
				"to_date_minutes": '<?php echo $_REQUEST["to_date_minutes"]?>',
				"to_date_seconds": '<?php echo $_REQUEST["to_date_seconds"]?>'
			},
			error: function(){  // error handling
				$("#ViewApiLog_dataTable").append('<tbody><tr class="oddListRowS1"><th colspan="8">No data found in the server</th></tr></tbody>');
				setTimeout(function() {
					SUGAR.ajaxUI.hideLoadingPanel();
				}, 300);
				
			}
		},
		"language": {
			"paginate": {
				"first":    '<img src="themes/RacerX/images/start.png?v=SpLBsqdUxmNsnM5bsI-YNA" align="absmiddle" border="0" alt="Start">',
				"previous": '<img src="themes/RacerX/images/previous.png?v=SpLBsqdUxmNsnM5bsI-YNA" align="absmiddle" border="0" alt="Previous">',
				"next":     '<img src="themes/RacerX/images/next.png?v=SpLBsqdUxmNsnM5bsI-YNA" align="absmiddle" border="0" alt="Next">',
				"last":     '<img src="themes/RacerX/images/end.png?v=SpLBsqdUxmNsnM5bsI-YNA" align="absmiddle" border="0" alt="End">'
			},
			"aria": {
				"paginate": {
					"first":    'First',
					"previous": 'Previous',
					"next":     'Next',
					"last":     'Last'
				}
			}
		},
		"fnDrawCallback": function( settings ) {
			setTimeout(function() {
				SUGAR.ajaxUI.hideLoadingPanel();
			}, 300);
		},
		"preDrawCallback": function(settings, json) {
			SUGAR.ajaxUI.showLoadingPanel();
		}
	});
});