DataTables

DataTables Examples

by Madalina Taina

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="chargebacks-table" class="table dataTable table-responsive table-col-reorder">
								<thead>
								<tr role="row">
									<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">
										<span>ID</span>
									</th>
									<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">
										<span>Stats</span>
									</th>
									<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">
										<span>Reason</span>
									</th>
									<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">
										<span>Amount(USD)</span>
									</th>
									<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">
										<span>Payment method</span>
									</th>
									<th class="sorting_asc" tabindex="0" aria-controls="" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">
										<span>Currency</span>
									</th>
									<th class="text-right">
										<span title="actions">...</span>
									</th>
								</tr>
								</thead>
               ...

CSS

div.slider {

}

JavaScript

$(document).ready(function() {
		// Setup - add a text input to each footer cell
		$('#chargebacks-table tfoot th').each( function () {
			var title = $(this).text();
			$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
		} );

		// DataTable
		var table = $('#chargebacks-table').DataTable({
			"paging": true,
			"ordering": true,
			"info":     true,
			"lengthChange": true,
			"responsive": true,
			"columnDefs": [
				{ "orderable": false, "targets": 6 },
				{"width": "20px", "targets": 6 }
			],
			"sDom": '<"wrapper-top-actions"RfBr>t<"wrapper-bottom-actions"ipl>',
			"buttons": [
				'copyHtml5',
				{
					extend:'csvHtml5',
					text: 'Export CSV'
				},
				{
					extend: 'colvis',
					columns: '5'
				},
				'excelHtml5',
				'pdfHtml5',
				'print'
			],
			"language": {
				"paginate": {
					"previous": "<",
					"next": ">"
				}
			},
			"deferRender": true,
			"fnCreatedRow": function( nRow, aData, iDataIndex ) {
				$('td:eq(6)', nRow).empty().append("" +
						"<div class=\"dropdown\">\n" +
						"  <button class=\"btn dropdown-btn-table\" type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n" +
						"    ...\n" +
						"  </button>\n" +
						"  <div class=\"dropdown-menu dropdown-menu-table-options\" aria-labelledby=\"dropdownMenuButton\">\n" +
						"    <a class=\"dropdown-item\" href=\"#\">View invoice</a>\n" +
						"    <a class=\"dropdown-item\" href=\"#\">Cancel invoice</a>\n" +
						"    <a class=\"dropdown-item\" href=\"#\">Refund</a>\n" +
						"    <a class=\"dropdown-item\" href=\"#\">Set as not refundable</a>\n" +
						"  </div>\n" +
						"</div>");
			}
		});
		// Setup - add a text input to each footer cell
		$('#chargebacks-table tfoot th').each( function () {
			var title = $(this).text();
			$(this).html( '<i class="material-icons">search</i><input type="text" placeholder="..." />' );
		} );
		// Apply the...