Data Tables

														
<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>
													

														
<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>		

$('#datable_1').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '', // or '→'
			previous: '' // or '←' 
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
													

														
<table id="datable_2" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>
													

														
$('#datable_2').DataTable( {
	scrollY:        "400px",
	scrollX:        true,
	language: { search: "",
		searchPlaceholder: "Search",
		paginate: {
		next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
		previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
													

														
<table id="datable_3" class="table nowrap">
<thead>
	<tr>
		<th>Seq.</th>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	...
	<tr>
		<td>8</td>
		<td>Rhona Davidson</td>
		<td>Integration Specialist</td>
		<td>Tokyo</td>
		<td>2010/10/14</td>
		<td>$327,900</td>
	</tr>
</tbody>
</table>
													

														
$('#datable_3').DataTable( {
	rowReorder: true,
	scrollX:true,
	//scrollX:true,
	autoWidth: false,
	"order": [[ 1, "asc" ]],
	columnDefs: [
		{ orderable: true, className: 'reorder', targets: 0 }
	],
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
													

														
<table id="datable_31" class="table nowrap table-striped">
<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Adwez Nash</td>
		<td>Software Engineer</td>
		<td>India</td>
		<td>38</td>
		<td>2014/05/03</td>
		<td>$763,500</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	<tr>
		<td>Ashton Cox</td>
		<td>Junior Technical Author</td>
		<td>San Francisco</td>
		<td>66</td>
		<td>2009/01/12</td>
		<td>$86,000</td>
	</tr>
	<tr>
		<td>Cedric Kelly</td>
		<td>Senior Javascript Developer</td>
		<td>Edinburgh</td>
		<td>22</td>
		<td>2012/03/29</td>
		<td>$433,060</td>
	</tr>
</tbody>
</table>
													

														
$('#datable_31').DataTable( {
	scrollX:  true,
	autoWidth: false,
	dom: 'Bfrtip',
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"info":     false,
	"bFilter":  false,
	buttons: [
		'copy', 'csv', 'excel', 'pdf', 'print'
	],
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
} );
$('#datable_31_wrapper .dt-buttons > .btn').addClass('btn-outline-light btn-sm');

													

														
<table id="datable_4" class="table nowrap">
<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	...
	<tr>
		<td>Donna Snider</td>
		<td>Customer Support</td>
		<td>New York</td>
		<td>27</td>
		<td>2011/01/25</td>
		<td>$112,000</td>
	</tr>
</tbody>
</table>
													

														
var targetElem = $('#datable_4');
var targetDt =targetElem.DataTable({
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	select: {
		style: 'multi'
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
$(document).on( 'click', '.del-button', function () {
	targetDt.rows('.selected').remove().draw( false );
});
$('Delete row').insertAfter(targetElem.closest('#datable_4_wrapper').find('.dataTables_length label'));

													

														
<table id="datable_4c" class="table nowrap">
<thead>
	<tr>
		<th><span class="fs-6">
			<input type="checkbox" class="form-check-input form-check-theme check-select-all" id="customCheck1">
		</span></th>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	...
	<tr>
		<td>Shou Itou</td>
		<td>Regional Marketing</td>
		<td>Tokyo</td>
		<td>20</td>
		<td>2011/08/14</td>
		<td>$163,000</td>
	</tr>
</tbody>
</table>
													

														
/*MultiRow Select Checkbox*/
/*Checkbox Add*/
var tdCnt=0;
$(' table#datable_4c tbody tr').each(function(){
	$('<td><span class="form-check"><input type="checkbox" class="form-check-input" id="chk_sel_'+tdCnt+'"><label class="form-check-label" for="chk_sel_'+tdCnt+'"></label></span></td>').prependTo($(this));
	tdCnt++;
});
/*DataTable Init*/
var targetDt1 = $('#datable_4c').DataTable({
	scrollX:  true,
	autoWidth: false,
	"columnDefs": [ {
		"searchable": false,
		"orderable": false,
		"targets": 0
	} ],
	"order": [[ 1, 'asc' ]],
	language: { search: "",
	searchPlaceholder: "Search",
	sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
													

														
<table id="datable_6" class="table nowrap">
<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	...
	<tr>
		<td>Donna Snider</td>
		<td>Customer Support</td>
		<td>New York</td>
		<td>27</td>
		<td>2011/01/25</td>
		<td>$112,000</td>
	</tr>
</tbody>
</table>
													

														
/*Row Grouping*/
var groupColumn = 2;
	var table_grp = $('#datable_6').DataTable({
	"columnDefs": [
		{ "visible": false, "targets": groupColumn }
	],
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
	searchPlaceholder: "Search",
	sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}

	},
	"order": [[ groupColumn, 'asc' ]],
	"displayLength": 25,
	"drawCallback": function ( settings ) {
		var api = this.api();
		var rows = api.rows( {page:'current'} ).nodes();
		var last=null;

		api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
			if ( last !== group ) {
				$(rows).eq( i ).before(
					'<tr class="group"><td colspan="5">'+group+'</td></tr>'
				);

				last = group;
			}
		} );
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
} );
// Order by the grouping
$('#datable_6 tbody').on( 'click', 'tr.group', function () {
	var currentOrder = table_grp.order()[0];
	if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
		table_grp.order( [ groupColumn, 'desc' ] ).draw();
	}
	else {
		table_grp.order( [ groupColumn, 'asc' ] ).draw();
	}
});
													

														
<table id="datable_7" class="table nowrap">
<thead>
	<tr>
		<th>First name</th>
		<th>Last name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger</td>
		<td>Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett</td>
		<td>Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>$170,750</td>
	</tr>
	...
	<tr>
		<td>Donna</td>
		<td>Snider</td>
		<td>Customer Support</td>
		<td>New York</td>
		<td>$112,000</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<th colspan="4" style="text-align:right">Total:</th>
		<th></th>
	</tr>
</tfoot>
</table>
													

														
$('#datable_7').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_item",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"footerCallback": function ( row, data, start, end, display ) {
		var api = this.api(), data;

		// Remove the formatting to get integer data for summation
		var intVal = function ( i ) {
			return typeof i === 'string' ?
				i.replace(/[\$,]/g, '')*1 :
				typeof i === 'number' ?
					i : 0;
		};

		// Total over all pages
		var total = api
			.column( 4 )
			.data()
			.reduce( function (a, b) {
				return intVal(a) + intVal(b);
			}, 0 );

		// Total over this page
		var pageTotal = api
			.column( 4, { page: 'current'} )
			.data()
			.reduce( function (a, b) {
				return intVal(a) + intVal(b);
			}, 0 );

		// Update footer
		$( api.column( 4 ).footer() ).html(
			'$'+pageTotal +' ( $'+ total +' total)'
		);
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
													

														
<table id="datable_10" class="table nowrap">
<thead>
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
		<th>Column 4</th>
		<th>Column 5</th>
	</tr>
</thead>
<tfoot>
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
		<th>Column 4</th>
		<th>Column 5</th>
	</tr>
</tfoot>
</table>
													

														
/*Add New Row*/
var targetElem_1 = $('#datable_10');
var targetDt2 = $('#datable_10').DataTable({
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
	searchPlaceholder: "Search",
	sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
var counter = 1;
$('Add row').insertAfter(targetElem_1.closest('#datable_10_wrapper').find('.dataTables_length label'));

	$('#add_row').on( 'click', function () {
	targetDt2.row.add( [
		counter +'.1',
		counter +'.2',
		counter +'.3',
		counter +'.4',
		counter +'.5'
	] ).draw( false );

	counter++;
});

// Automatically add a first row of data
$('#add_row').trigger('click');
													

														
<table id="datable_11" class="table nowrap w-100">
<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
	<tr>
		<th class="filterhead">Name</th>
		<th class="filterhead">Position</th>
		<th class="filterhead">Office</th>
		<th class="filterhead">Age</th>
		<th class="filterhead">Start date</th>
		<th class="filterhead">Salary</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	<tr>
		<td>Garrett Winters</td>
		<td>Accountant</td>
		<td>Tokyo</td>
		<td>63</td>
		<td>2011/07/25</td>
		<td>$170,750</td>
	</tr>
	...
	<tr>
		<td>Donna Snider</td>
		<td>Customer Support</td>
		<td>New York</td>
		<td>27</td>
		<td>2011/01/25</td>
		<td>$112,000</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
	</tr>
</tfoot>
</table>
													

														
$('#datable_11').DataTable( {
	orderCellsTop: true,
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
	searchPlaceholder: "Search",
	sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	initComplete: function () {
		var api = this.api();
		$('.filterhead', api.table().header()).each( function (i) {
			var column = api.column(i);
			var select = $('<select class="form-select form-select-sm" ><option value="">Show All</option></select>')
				.appendTo( $(this).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( '<option value="'+d+'">'+d+'</option>' );
			} );
		} );
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});
													

														
<table id="datable_12" class="table nowrap">
<thead>
	<tr>
		<th>Name</th>
		<th>Age</th>
		<th>Position</th>
		<th>Office</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td><input type="text" class="form-control form-control-sm"  id="row-1-age" name="row-1-age" value="61"></td>
		<td><input type="text" class="form-control form-control-sm"  id="row-1-position" name="row-1-position" value="System Architect"></td>
		<td><select size="1" class="form-select form-select-sm"  id="row-1-office" name="row-1-office">
			<option value="Edinburgh" selected="selected">
				Edinburgh
			</option>
			<option value="London">
				London
			</option>
			<option value="New York">
				New York
			</option>
			<option value="San Francisco">
				San Francisco
			</option>
			<option value="Tokyo">
				Tokyo
			</option>
		</select></td>
	</tr>
	...
	<tr>
		<td>Donna Snider</td>
		<td><input type="text" class="form-control form-control-sm"  id="row-57-age" name="row-57-age" value="27"></td>
		<td><input type="text" class="form-control form-control-sm"  id="row-57-position" name="row-57-position" value="Customer Support"></td>
		<td><select size="1" class="form-select form-select-sm"  id="row-57-office" name="row-57-office">
			<option value="Edinburgh">
				Edinburgh
			</option>
			<option value="London">
				London
			</option>
			<option value="New York" selected="selected">
				New York
			</option>
			<option value="San Francisco">
				San Francisco
			</option>
			<option value="Tokyo">
				Tokyo
			</option>
		</select></td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<th>Name</th>
		<th>Age</th>
		<th>Position</th>
		<th>Office</th>
	</tr>
</tfoot>
</table>
													

														
var targetElem_2 = $('#datable_12');
var table = $('#datable_12').DataTable({
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
			previous: '<i class="ri-arrow-left-s-line"></i>' // or '←' 
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	},
	columnDefs: [{
		orderable: false,
		targets: [1,2,3]
	}]
});
$('<button id="add_data" class="btn btn-soft-primary btn-sm ms-2">Add row</button>').insertAfter(targetElem_2.closest('#datable_12_wrapper').find('.dataTables_length label'));
	$('#add_data').on( 'click', function () {
	var data = table.$('input, select').serialize();
	alert(
		"The following data would have been submitted to the server: \n\n"+
		data.substr( 0, 120 )+'...'
	);
	return false;
});
													

														
<table id="datable_14" class="table nowrap w-100">
<thead>
	<tr>
		<th>Name</th>
		<th>Position</th>
		<th>Office</th>
		<th>Age</th>
		<th>Start date</th>
		<th>Salary</th>
		<th>Number</th>
		<th>End date</th>
		<th>Salary 2</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Tiger Nixon</td>
		<td>System Architect</td>
		<td>Edinburgh</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
		<td>61</td>
		<td>2011/04/25</td>
		<td>$320,800</td>
	</tr>
	...
	<tr>
		<td>Charde Marshall</td>
		<td>Regional Director</td>
		<td>San Francisco</td>
		<td>36</td>
		<td>2008/10/16</td>
		<td>$470,600</td>
		<td>36</td>
		<td>2008/10/16</td>
		<td>$470,600</td>
	</tr>
	
</tbody>
</table>
													

														
$('#datable_14').removeAttr('width').DataTable({ 
	scrollX:        true,
	scrollCollapse: true,
	paging:         false,
	fixedColumns: true,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
	},
});