Examples

Basic

									
										<div class="table-responsive">
											<table id="basic-datatables" class="display table table-striped table-hover" cellspacing="0" width="100%">
												<thead>
													...
												</thead>
												<tfoot>
													...
												</tfoot>
												<tbody>
													...
												</tbody>
											</table>
										</div>
									
								

									
										$('#basic-datatables').DataTable();
									
								

Multi Filter Select

									
										<div class="table-responsive">
											<table id="multi-filter-select" class="display table table-striped table-hover" cellspacing="0" width="100%">
												<thead>
													...
												</thead>
												<tfoot>
													...
												</tfoot>
												<tbody>
													...
												</tbody>
											</table>
										</div>
									
								

									
										$('#multi-filter-select').DataTable( {
											"pageLength": 5,
											initComplete: function () {
												this.api().columns().every( function () {
													var column = this;
													var select = $('')
													.appendTo( $(column.footer()).empty() )
													.on( 'change', function () {
														var val = $.fn.dataTable.util.escapeRegex(
															$(this).val()
															);

														column
														.search( val ? '^'+val+'$' : '', true, false )
														.draw();
													} );

													column.data().unique().sort().each( function ( d, j ) {
														select.append( ''+d+'' )
													} );
												} );
											}
										});
									
								

Add Row

									
										<!-- Button -->
									<div class="d-flex">
										<button class="btn btn-primary btn-round ml-auto mb-3" data-toggle="modal" data-target="#addRowModal">
											<i class="fa fa-plus"></i>
											Add Row
										</button>
									</div>

									<!-- Modal -->
									<div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
										<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header no-bd">
													<h5 class="modal-title">
														<span class="fw-mediumbold">
														New</span>
														<span class="fw-light">
															Row
														</span>
													</h5>
													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<div class="modal-body">
													<p class="small">Create a new row using this form, make sure you fill them all</p>
													<form role="form">
														<div class="row">
															<div class="col-sm-12">
																<div class="form-group form-group-default">
																	<label>Name</label>
																	<input id="addName" type="text" class="form-control" placeholder="fill name">
																</div>
															</div>
															<div class="col-md-6 pr-0">
																<div class="form-group form-group-default">
																	<label>Position</label>
																	<input id="addPosition" type="text" class="form-control" placeholder="fill position">
																</div>
															</div>
															<div class="col-md-6">
																<div class="form-group form-group-default">
																	<label>Office</label>
																	<input id="addOffice" type="text" class="form-control" placeholder="fill office">
																</div>
															</div>
														</div>
													</form>
												</div>
												<div class="modal-footer no-bd">
													<button type="button" id="addRowButton" class="btn btn-primary">Add</button>
													<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>

									<!-- Table -->
									<div class="table-responsive">
										<table id="add-row" class="display table table-striped table-hover" cellspacing="0" width="100%">
											<thead>
												...
											</thead>
											<tfoot>
												...
											</tfoot>
											<tbody>
												...
											</tbody>
										</table>
									</div>
									
								

									
										// Add Row
										$('#add-row').DataTable({
											"pageLength": 5,
										});

										var action = '<td> <div class="form-button-action"> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-simple-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-simple-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

										$('#addRowButton').click(function() {
											$('#add-row').dataTable().fnAddData([
												$("#addName").val(),
												$("#addPosition").val(),
												$("#addOffice").val(),
												action
												]);
											$('#addRowModal').modal('hide');

										});