old footer

	<footer>
		<p>copyright©2019 Icarus</p>
	</footer>


	<script type="text/javascript" src="/js/nexex/test.js"></script>
	<!-- <script type="text/javascript" src="/assets/scripts/jquery-3.4.1.min.js"></script> -->
 	<script type="text/javascript" charset="utf8" src="/assets/scripts/jquery.dataTables.min.js"></script>
 	<script type="text/javascript" src="/assets/scripts/dataTables.bootstrap4.min.js"></script>
 		 <script type="text/javascript" src="/js/custom.js"></script>


  <script>

  		/* Formatting function for row details - modify as you need */
		function format ( d ) {
		    // `d` is the original data object for the row
		return '\
			<div class="container-fluid">\
			 <div class="row">\
			    <table class="childTable table" cellpadding="5" cellspacing="0" border="0">\
			        <tr>\
			            <td class="key">Category:</td>\
			            <td> '+( d.CATEGORY ? d.CATEGORY : null)+'</td>\
			            <td class="key">Title:</td>\
			            <td>'+( d.TITLE ? d.TITLE : null )+'</td>\
			        </tr>\
			        <tr>\
			            <td class="key">Sub Category:</td>\
			            <td>'+( d.SUB_CATEGORY ? d.SUB_CATEGORY : null )+' </td>\
			            <td class="key">Position:</td>\
			            <td>'+( d.POSITION ? d.POSITION : null )+'</td>\
			        </tr>\
			        <tr>\
			            <td class="key">Age:</td>\
			            <td>'+( d.AGE ? d.AGE : null )+'</td>\
			            <td class="key">Place of birth:</td>\
			            <td>'+( d.POB ? d.POB : null )+'</td>\
			        </tr>\
			        <tr>\
			            <td class="key">Entered:</td>\
			            <td>'+( d.ENTERED ? d.ENTERED : null )+'</td>\
			            <td class="key">Updated:</td>\
			            <td>'+( d.UPDATED ? d.UPDATED : null )+'</td>\
			        </tr>\
			        <tr>\
			            <td class="key">Age date:</td>\
			            <td>'+( d.AGE_DATE ? d.AGE_DATE : null )+'</td>\
			            <td class="key">Linked to:</td>\
			            <td>'+( d.LINKED_TO ? d.LINKED_TO : null )+'</td>\
			        </tr>\
			        <tr>\
			            <td class="key">Keyword:</td>\
			            <td>'+( d.KEYWORD ? d.KEYWORD : null )+'</td>\
			            <td class="key">Uri:</td>\
			            <td>'+( d.URI ? d.URI : null )+'</td>\
			        </tr>\
			        <tr>\
			            <td class="key">Company:</td>\
			            <td>'+( d.COMPANY ? d.COMPANY : null )+'</td>\
			            <td class="key">Alternative spelling:</td>\
			            <td>'+( d.ALTERNATIVE_SPELLING ? d.ALTERNATIVE_SPELLING : null )+' </td>\
			        </tr>\
			        <tr>\
			            <td class="key">Alias:</td>\
			            <td>'+( d.ALIAS ? d.ALIAS : null )+'</td>\
			            <td class="key">Extra info:</td>\
			            <td>example extra info</td>\
			        </tr>\
			    </table>\
			  </div>\
			</div>';
		}

		$(document).ready(function ()
		{
			// Disable search and ordering by default
			$.extend( $.fn.dataTable.defaults, {
			    ordering:  false,
			} );

			// Used to detect first request
			var firstRequest = 1;

			//Init Datatable
			var table = $( '#dataTable' ).DataTable({
				processing: true,
    			serverSide: true,
    			responsive: true,
    			lengthMenu: [[10, 25, 50], [10, 25, 50]],
                language: { // language settings
                    // metronic spesific
                    metronicGroupActions: "_TOTAL_ records selected:  ",
                    metronicAjaxRequestGeneralError: "Could not complete request. Please check your internet connection",
                    // data tables spesific
                    lengthMenu: "</span>View _MENU_ records",
                    info: "Found total _TOTAL_ records",
                    infoEmpty: "No records found to show",
                    emptyTable: "No data available in table",
                    zeroRecords: "No matching records found"
                },
                "pagingType": "numbers", // pagination type(bootstrap, bootstrap_full_number or bootstrap_extended)
                "autoWidth": false, // disable fixed width and enable fluid table
    			ajax:
    			{
    				url: '/api/getuserdata',
    				type: 'POST',

					data: function(d)
					{
						var filters = {};

						// on first load get filters from session and send to server
						if(firstRequest == 1)
						{
							var keys = Object.entries(<?= json_encode($this->session->filters())?>);
							keys.forEach(function(elem)
							{
								filters[elem[0]] = elem[1];
							});

							Object.assign(d, {"filters": filters});
							firstRequest++;
						}
						// on second plus load get filters from active input fields and send to server
						else
						{
							$('.active').each(function(i, elem)
							{
								if(elem.value)
								{
									if(elem.value.includes(','))
								 		filters[elem.id] = elem.value.split(",");
								 	else
								 		filters[elem.id] = elem.value;
									Object.assign(d, {"filters": filters});
								}
							});
						}
						return d;
					}
    			},
    			columns:
    			[
    				{ data: null },
    				{
		                className:      'details-control',
		                data:           null,
		                defaultContent: ''
		            },
	    			{ data: 'UID' },
	    			{ data: 'LAST_NAME' },
			        { data: 'FIRST_NAME' },
			        { data: 'DOB' },
			        { data: 'CITY' },
			        { data: 'STATE' },
			        { data: 'lCOUNTRY' },
			        { data: 'COUNTRY' },
			        {
			        	data: null,
			        	defaultContent: ''
			        }
    			],
    			// bInfo: false,
    			rowCallback: function(row, data, i)
    			{
    				var index = i+1;
    				$( 'td:eq(0)', row ).html(index);
					return row;
    			}
    			});

			// get filters from session
		    var keys = <?=json_encode($this->session->filters());?>;

			//Add filters for each column
			$( '#dataTable thead tr' ).clone(true).appendTo( '#dataTable thead' );

			$( '.hide:eq(1)' ).html( '%' ).css( 'text-align', 'center' ).css( 'vertical-align', 'middle' );

		    $( '#dataTable thead tr:eq(1) th' ).each( function (i)
		    {
		        var title = $(this).text().trim().toLowerCase();
		        // Set value for the column if in session
		        var value = keys[title] ? keys[title].toString() : "";
		        // Add search filters to all columns except first and last- index column, possibility column
		        if(i!=0 && i != 1 && i != 10 )
		        {
			        $(this).html( '<div class="input-group">\
									   <input type="text" data-id="'+i+'" id="'+title+'"\
							        				class="filter form-control '+(value !== "" ? "active" : "")+'" value="'+value+'" placeholder="Search" />\
							         <div class="input-group-append" data-id="'+i+'">\
									      <span class="input-group-text '+(value !== "" ? "" : "plus")+'">\
									      '+(value !== "" ? "-" : "+")+'\
									      </span>\
									    </div>\
									</div>'
								);
			    }
		    } );

		    // Add event listener for opening and closing details
		    $('#dataTable tbody').on('click', 'tr', function ()
		    {
		        var tr = $(this).closest('tr');
		        var row = table.row( tr );

		        if ( row.child.isShown() ) {
		            // This row is already open - close it
		            row.child.hide();
		            tr.removeClass('shown');
		        }
		        else {
		            // Open this row
		            row.child( format(row.data()) ).show();
		            tr.addClass('shown');
		        }
		    } );

		    // Change classes and +/-
		    $('.input-group-append').on('click', function()
		    {
		    	// get element with active class to delete or add `active` class
		    	var active = $(this).prev();

		    	// get element with plus class to delete or add `plus` class
		    	var plus = $(this).children();

		    	// Add/remove `active` class from element and trigger classChange event
		    	active.toggleClass('active').trigger('classChange');
		    	plus.toggleClass('plus', 1000);

		    	plus.hasClass('plus') ? $(this).children().html('+') : $(this).children().html('-');

		    	table.ajax.reload();
		    });

		    // Reload datatable on fitler change
		    $('.filter').on('change', function(){
		    	if($(this).hasClass('active'))
		    		table.ajax.reload();
		    });

		});

	</script>
</body>
</html>