a DataTable Model

by andrew45

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<table id="table_id" class="display" style="width:100%">
<thead>
        <tr>
            <th>Name</th>
            <th>Date of birthday</th>
		        <th>Days</th>
        </tr>
    </thead>
</table>

CSS

#table_id .user_row td {color:red;background:#ddd !important}

JavaScript

$(document).ready(function() {
    $('#table_id').DataTable( {
		paging: true,
        "ajax": "https://download1642.mediafire.com/2tq7iz0tzmug/t7cm3itjgnznfob/test_array.txt",		
		"columns": [
    { className: "name" },
    { className: "date_of_birthday" },
	{ className: "days" }
  ] 		
    } );	
	
	let table = $('#table_id').DataTable();
		
	let date = new Date();
	startDate = '2010-05-20';
	timeDiff  = Date.now() - (new Date(startDate));
	days      = Math.round(timeDiff / (86400000));
	
		
	let jRow = $('<tr class=user_row>').append('<td>-- YOU --</td>', '<td>' + startDate + '</td>', '<td>' + days + '</td>');
    table.row.add(jRow);	

} );


function checkTableReady() {
  
	if ((document.getElementsByClassName('name').length) > 5)
	{
	// alert("if YES");	
	
		for (let i = 1; i < document.getElementsByClassName('date_of_birthday').length; i++) 
		{			
			
			startDate = document.getElementsByClassName('date_of_birthday')[i].innerHTML;			

				endDate   = Date.now();
				timeDiff  = (endDate - (new Date(startDate)));								
				days = Math.round(timeDiff / (86400000));
				document.getElementsByClassName('days')[i].innerHTML = days;
		}	
	
	clearTimeout(checkDOM);
		
	}
	else
	{
	//	alert("if NO. Length is " + document.getElementsByClassName('name').length);
		setTimeout(checkTableReady, 30);
	}		

}

let checkDOM = setTimeout(checkTableReady, 45);

checkTableReady();