JSFiddle - React, Tailwind, and code Playground

by Garry Passarella

JavaScript

$(document).ready(function() {
    //Do the AJAX call to get the columns FIRST
	$.ajax({
	    dataType: "json",
	    url: '/get_aoColumns',
	    data: function(table_name) {
	        return {
	            q: table_name
	        };
	    },
	    success: function(data) {
	        /* Add/remove class to a row when clicked on */
	        $('#table1 tr').on('click', function() {
	            $(this).toggleClass('row_selected');
	        });
			
	        var which_table = window.location.pathname;
	        var which_table_data = which_table.substring(0, which_table.length - 1) + '/data';
	        var table_name = which_table.substring(14, which_table.length - 1);
	        $('#table1').dataTable({
	            "bProcessing": true,
	            "bServerSide": true,
	            "bjQueryUI": true,
	            "sAjaxSource": which_table_data,
	            "bPaginate": true,
	            "sPaginationType": "full_numbers",
	            "bjQueryUI": true,
	            "sScrollX": "100%",
	            "aoColumnDefs": [{
	                "targets": [0],
	                "visible": false,
	                "searchable": false
	            }]
	        }).makeEditable({
	            "sUpdateURL": "../update/" + table_name,
	            "sAddURL": "../add/" + table_name,
	            "sDeleteURL": "../delete/" + table_name,
                
                //NOW YOU CAN LOAD THE COLUMNS HERE (YOU MAY HAVE TO PLAY WITH THE
                //DATA THAT COMES BACK FROM THE SERVER, DEPENDING ON THE FORMAT IT IS
                //IN AND WHAT IS REQUIRED BY DATATABLES                
	            "aoColumns": data
	
	        });
		}
    });
});