JSFiddle - React, Tailwind, and code Playground

by jezrael

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="tab1" class='data tab01'>
	<thead>
		<tr>
			<th>cat1</th>
			<th>cat2</th>
			<th>cat3</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

JavaScript

jQuery.fn.dataTable.Api.register('row.addByPos()', function(data, index) {     
    var currentPage = this.page();
    //console.log(this.page());
    //insert the row 
    this.row.add(data);
    //console.log(data);

		//move added row to desired index
		var rowCount = this.data().length-1,
			insertedRow = this.row(rowCount).data(),
			tempRow;
        console.log('rowCount = '+rowCount);
        //console.log(insertedRow);    

		for (var i=rowCount;i>=index;i--) {
            console.log('i = '+i);
			tempRow = this.row(i-1).data();
			this.row(i).data(tempRow);
			this.row(i-1).data(insertedRow);
		}     

		//refresh the current page
		this.page(currentPage).draw(false);
        //console.log(this.page(currentPage));
	});	


var t = $("#tab1").DataTable({
			"ajax": "https://api.myjson.com/bins/48g56",
			"aaSorting": [],
			"columns": [
				{ "data": "cat1"},
				{ "data": "cat2"},
				{ "data": "cat3"}
				]
				});
					
			$.ajax({
				type: "GET",
				url: "https://api.myjson.com/bins/1bfa2",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function (response) {
                    response.data.forEach(function(data) {
                        console.log(data)
                        t.row.addByPos(data, 3); 
                    })    
				}
			  });