JSFiddle - React, Tailwind, and code Playground

by jtoepfer

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/v/bs/dt-1.10.13/fh-3.1.2/sc-1.4.2/datatables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/v/bs/dt-1.10.13/fh-3.1.2/sc-1.4.2/datatables.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-offset-1 col-md-4">
      <div class="row">
        <h4>Schedule Form</h4>
        <form class="form-horizontal" role="form">
          <div class="form-group form-group-sm">
            <label for="select1" class="col-sm-2 control-label">Label 1</label>
            <div class="col-sm-10">
              <select class="form-control" name="select1" id="select1">
                <option value="">-- Select an Option --</option>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="col-md-offset-1 col-md-6">
      <div class="row">
        <div class="row">
          <h4>Schedule</h4>
        </div>
        <table id="schedules" class="table table-bordered table-hover">
          <thread>
            <tr>
              <th>Col 1</th>
              <th>Col 2</th>
              <th>Col 3</th>
              <th>Col 4</th>
              <th></th>
            </tr>
          </thread>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

JavaScript

var createbuttons = function(data, type, row, meta) {
	return '<button class="btn btn-default btn-warning btn-xs remove-btn"> \
    <span class="glyphicon glyphicon-remove"></span> \
    </button>';
}

var config = {
		"lengthChange": false,
		"fixedHeader": true,
		"bJQueryUI": true,
		"bFilter": false,
		"ordering": true,
		"info": false,
		"columns": [
			{"data": "col1"},
			{"data": "col2"},
			{"data": "col3"},
			{"data": "col4"},
			{"data": "col5", "type":"html", "orderable":false, "width":"10%", "render":createbuttons}
		],
		"createdRow": function(row, data, index) {
			var $row = $(row);
			$row.attr('id', 'row_'+index);
		},
		"rowCallback": function(row, data) {
			var $row = $(row);
			$row.data('dataSet', data);
		},
		"drawCallback": function( settings ) {
		}
};
  
var schedulestbl = $('#schedules').DataTable(config);

function loadTable() {
    $.ajax({
    	url:'/echo/js/?js={"cols":[{"col1":"col1", "col2":"col2", "col3":"col3"}, "col4":"col4", "col5":"col5"]}'
		})
    .done(function(data, textStatus, jqXHR) {
    	if(data && data.cols) {
      	schedulestbl.clear();
        schedulestbl.rows.add(data.cols);
        schedulestbl.draw();
      }
    })
    return false;
}