DATATABLE

by Khadeer Mohammed

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display datatable single" id="example">
          <thead>
            <tr role="row"></tr>
          </thead>
          <tbody role="alert" aria-live="polite" aria-relevant="all">
          </tbody>
        </table>
        
        
  <script>
  var jsonData = function () {
	var context="";	
	var jsonArr="";	
	var showColumns="";
	var gridLangMsgs="";
	var frmWidth="800";
	var frmHeight="490";
	var selRowId="-1";
	var selRowValues=[];
	var arrSelRowId	= new Array();	
	var aTargets	= new Array();
	var iFixedColumns = "1";
	var aiExclude	= new Array();
	var dataTable	=	null;
	var requestUrl	=	"";
	var groupJsonArr = "";
	var groupJsonArr2 = "";
	aTargets.push(0);
	aiExclude.push(0);
	aiExclude.push(1);
			
	return {
		setJsonArr : function (val) {
			jsonArr = val;
		},
		setGroupJsonArr : function (val) {
			groupJsonArr = val;
		},
		setGroupJsonArr2 : function (val) {
			groupJsonArr2 = val;
		},
		setGridLangMsgs : function (val) {
			gridLangMsgs = val;
		},
		setShowColumns : function (val) {
			showColumns = val;
		},
		setDialogFormWidth : function (val) {
			frmWidth = val;
		},
		setDialogFormHeight : function (val) {
			frmHeight = val;
		},
		setSelRowId : function (val) {
			selRowId = val;
		},
		setSelRowValues : function (val) {
			selRowValues = val;
		},
		setArrSelRowId : function (val) {
			arrSelRowId = val;
		},		
		setaTargets : function (val) {
			aTargets= new Array();
			aTargets = val;
		},
		setiFixedColumns : function (val) {
			iFixedColumns = val;
		},
		setaiExclude : function (val) {
			aiExclude	= new Array();
			aiExclude = val;
		},
		setDataTable : function (val) {
			dataTable = val;
		},
		setContext : function (val)...

CSS

@font-face {
	font-family: "Flaticon";
	src: url("fonts/flaticon.eot");
	src: url("fonts/flaticon.eot#iefix") format("embedded-opentype"),
	url("fonts/flaticon.woff") format("woff"),
	url("fonts/flaticon.ttf") format("truetype"),
	url("fonts/flaticon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}

div.dataTables_scrollBody thead th {
  vertical-align: top;
}

.main_wrapper{ margin:42px 10px 0 0;}

.main_cont{ margin-left:55px;}

.datatable_cont{ position:relative; clear:both;}
.datatable_cont table tfoot{ display:none;}
.datatable_cont_pop{ position:relative; clear:both;}
.datatable_cont_pop table tfoot{ display:none;}

.dataTables_wrapper {
	position: relative;
	clear: both;
	width:100%; overflow:hidden;
	zoom: 1; /* Feeling sorry for IE */
}

#div_mainPanel .dataTables_wrapper{ width:100%;}


.dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 30px;
	margin-left: -125px;
	margin-top: -15px;
	padding: 14px 0 2px 0;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 14px;
	background-color: white;
}

.dataTables_length {
	line-height:30px;
	color:#fff;
	font-size:12px;
	display: inline-block;
}

.dataTables_length select{ padding:5px; width:70px !important; border-radius:20px;}
.dataTables_length select:focus{ outline:none;}
.dataTables_scrollHeadInner{ background:#39455a;}

/*.dataTables_length label{ float:right;}*/
.dataTables_scrollHeadInner{ padding-right:15px !important;}

.dataTables_filter {
	width: 50%;
	float: right;
	position:relative;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.dataTables_filter label{ float:right;margin: 0 5px;}

.dataTables_filter input, .ui-widget .dataTables_filter input[type="text"]{ padding:8px 35px 8px 15px; background:#fff; width:230px; border:none; position:relative; border-radius:25px!important;}


/* .dataTables_filter input[type="search"]{height:32px;} */

.dataTables_filter:before, .ui-widget...