DataTables

DataTables Examples

by ibroom

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<h1>
				DataTables Editor <span>test</span>
			</h1>
			
			<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="test" width="100%">
				<thead>
					<tr>
						<th>Family member</th>
						<th>Date</th>
						<th>Start time</th>
						<th>End time</th>
						<th>Type</th>
						<th>Location</th>
						<th>Description</th>
					</tr>
				</thead>
			</table>

JavaScript

/*
 * Editor client script for DB table test
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
	var editor = new $.fn.dataTable.Editor( {
		table: '#test',
		fields: [
			{
				"label": "Family member:",
				"name": "family_member",
				"type": "select",
				"options": [
					"John Smith",
					"Mary Smith",
					"Max Smith"
				]
			},
			{
				"label": "Date:",
				"name": "date",
				"type": "datetime",
				"format": "ddd, D MMM YY"
			},
			{
				"label": "Start time:",
				"name": "start_time",
				"type": "datetime",
				"format": "HH:mm"
			},
			{
				"label": "End time:",
				"name": "end_time"
			},
			{
				"label": "Type:",
				"name": "type",
				"type": "select",
				"options": [
					"Work",
					"Personal"
				]
			},
			{
				"label": "Location:",
				"name": "location",
				"type": "select",
				"options": [
					"Lulsgate",
					"Dodington",
					"Queens In transit"
				]
			},
			{
				"label": "Description:",
				"name": "description"
			}
		]
	} );

	var table = $('#test').DataTable( {
		columns: [
			{
				"data": "family_member"
			},
			{
				"data": "date"
			},
			{
				"data": "start_time"
			},
			{
				"data": "end_time"
			},
			{
				"data": "type"
			},
			{
				"data": "location"
			},
			{
				"data": "description"
			}
		],
		select: true,
		lengthChange: false
	} );

	new $.fn.dataTable.Buttons( table, [
		{ extend: "create", editor: editor },
		{ extend: "edit",   editor: editor },
		{ extend: "remove", editor: editor }
	] );

	table.buttons().container()
		.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
} );

}(jQuery));