DataTables fixed header

Developer
Dirk Drijkoningen
Size
3,218 Kb
Views
10,120
  1. DataTables fixed header Previews
  2. DataTables fixed header HTML Codes
  3. DataTables fixed header CSS Codes
  4. DataTables fixed header JS Codes

How do I make an datatables fixed header?

Example of the fixed header extension and a demo of all elements (buttons, filter, info and length) on the same line.. What is a datatables fixed header? How do you make a datatables fixed header? This script and codes were developed by Dirk Drijkoningen on 19 January 2023, Thursday.

DataTables fixed header Previews
IQ Test

DataTables fixed header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>dataTables fixed header</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">	<thead>	<tr>	<th>Order</th>	<th>Description</th>	<th>Deadline</th>	<th>Status</th>	<th>Amount</th>	</tr>	</thead>	<tbody>	<tr>	<td>1</td>	<td>Alphabet puzzle</td>	<td>2016/01/15</td>	<td>Done</td>	<td data-order="1000">€1.000,00</td>	</tr>	<tr>	<td>2</td>	<td>Layout for poster</td>	<td>2016/01/31</td>	<td>Planned</td>	<td data-order="1834">€1.834,00</td>	</tr>	<tr>	<td>3</td>	<td>Image creation</td>	<td>2016/01/23</td>	<td>To Do</td>	<td data-order="1500">€1.500,00</td>	</tr>	<tr>	<td>4</td>	<td>Create font</td>	<td>2016/02/26</td>	<td>Done</td>	<td data-order="1200">€1.200,00</td>	</tr>	<tr>	<td>5</td>	<td>Sticker production</td>	<td>2016/02/18</td>	<td>Planned</td>	<td data-order="2100">€2.100,00</td>	</tr>	<tr>	<td>6</td>	<td>Glossy poster</td>	<td>2016/03/17</td>	<td>To Do</td>	<td data-order="899">€899,00</td>	</tr>	<tr>	<td>7</td>	<td>Beer label</td>	<td>2016/05/28</td>	<td>Confirmed</td>	<td data-order="2499">€2.499,00</td>	</tr>	<tr>	<td>8</td>	<td>Shop sign</td>	<td>2016/04/19</td>	<td>Offer</td>	<td data-order="1099">€1.099,00</td>	</tr>	<tr>	<td>9</td>	<td>X-Mas decoration</td>	<td>2016/10/31</td>	<td>Confirmed</td>	<td data-order="1750">€1.750,00</td>	</tr>	<tr>	<td>10</td>	<td>Halloween invite</td>	<td>2016/09/12</td>	<td>Planned</td>	<td data-order="400">€400,00</td>	</tr>	<tr>	<td>11</td>	<td>Wedding announcement</td>	<td>2016/07/09</td>	<td>To Do</td>	<td data-order="299">€299,00</td>	</tr>	<tr>	<td>12</td>	<td>Member pasport</td>	<td>2016/06/22</td>	<td>Offer</td>	<td data-order="149">€149,00</td>	</tr>	<tr>	<td>13</td>	<td>Drink tickets</td>	<td>2016/11/01</td>	<td>Confirmed</td>	<td data-order="199">€199,00</td>	</tr>	<tr>	<td>14</td>	<td>Album cover</td>	<td>2017/03/15</td>	<td>To Do</td>	<td data-order="4999">€4.999,00</td>	</tr>	<tr>	<td>15</td>	<td>Shipment box</td>	<td>2017/02/08</td>	<td>Offer</td>	<td data-order="1399">€1.399,00</td>	</tr>	<tr>	<td>16</td>	<td>Wooden puzzle</td>	<td>2017/01/11</td>	<td>Done</td>	<td data-order="1000">€1.000,00</td>	</tr>	<tr>	<td>17</td>	<td>Fashion Layout</td>	<td>2016/01/30</td>	<td>Planned</td>	<td data-order="1834">€1.834,00</td>	</tr>	<tr>	<td>18</td>	<td>Toy creation</td>	<td>2016/01/10</td>	<td>To Do</td>	<td data-order="1550">€1.550,00</td>	</tr>	<tr>	<td>19</td>	<td>Create stamps</td>	<td>2016/02/26</td>	<td>Done</td>	<td data-order="1220">€1.220,00</td>	</tr>	<tr>	<td>20</td>	<td>Sticker design</td>	<td>2017/02/18</td>	<td>Planned</td>	<td data-order="2100">€2.100,00</td>	</tr>	<tr>	<td>21</td>	<td>Poster rock concert</td>	<td>2017/04/17</td>	<td>To Do</td>	<td data-order="899">€899,00</td>	</tr>	<tr>	<td>22</td>	<td>Wine label</td>	<td>2017/05/28</td>	<td>Confirmed</td>	<td data-order="2799">€2.799,00</td>	</tr>	<tr>	<td>23</td>	<td>Shopping bag</td>	<td>2017/04/19</td>	<td>Offer</td>	<td data-order="1299">€1.299,00</td>	</tr>	<tr>	<td>24</td>	<td>Decoration for Easter</td>	<td>2017/10/31</td>	<td>Confirmed</td>	<td data-order="1650">€1.650,00</td>	</tr>	<tr>	<td>25</td>	<td>Saint Nicolas colorbook</td>	<td>2017/09/12</td>	<td>Planned</td>	<td data-order="510">€510,00</td>	</tr>	<tr>	<td>26</td>	<td>Wedding invites</td>	<td>2017/07/09</td>	<td>To Do</td>	<td data-order="399">€399,00</td>	</tr>	<tr>	<td>27</td>	<td>Member pasport</td>	<td>2017/06/22</td>	<td>Offer</td>	<td data-order="249">€249,00</td>	</tr>	<tr>	<td>28</td>	<td>Drink tickets</td>	<td>2017/11/01</td>	<td>Confirmed</td>	<td data-order="199">€199,00</td>	</tr>	<tr>	<td>29</td>	<td>Blue-Ray cover</td>	<td>2018/03/15</td>	<td>To Do</td>	<td data-order="1999">€1.999,00</td>	</tr>	<tr>	<td>30</td>	<td>TV carton</td>	<td>2019/02/08</td>	<td>Offer</td>	<td data-order="1369">€1.369,00</td>	</tr>	</tbody>
</table> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js'></script>
<script src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js'></script>
<script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js'></script>
<script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script>
<script src='https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

DataTables fixed header - Script Codes CSS Codes

body {	margin:2em 3em;
}
.dt-buttons {	margin-bottom: 10px;
}
.dt-buttons.btn-group{	float: left;	margin-right: 2%;
}
.dataTables_filter {	float: left;	margin-top: 4px;	margin-right: 2%;	text-align: left;
}
.dataTables_info {	float: right;
}
.dataTables_length{	float: right;	margin-top: 4px;	margin-left: 2%;
}

DataTables fixed header - Script Codes JS Codes

$(document).ready(function() {	//Only needed for the filename of export files.	//Normally set in the title tag of your page.	document.title='Simple DataTable';	// DataTable initialisation	$('#example').DataTable(	{	"dom": '<"dt-buttons"Bfli>rtp',	"paging": false,	"autoWidth": true,	"fixedHeader": true,	"buttons": [	'colvis',	'copyHtml5', 'csvHtml5',	'excelHtml5', 'pdfHtml5',	'print'	]	}	);
});
DataTables fixed header - Script Codes
DataTables fixed header - Script Codes
Home Page Home
Developer Dirk Drijkoningen
Username RedJokingInn
Uploaded January 19, 2023
Rating 3
Size 3,218 Kb
Views 10,120
Do you need developer help for DataTables fixed header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dirk Drijkoningen (RedJokingInn) Script Codes
Name
Functie 2 resultaten
DataTables buttons and bootstrap 3
DataTables custom PDF
Just a test
Visualize Array Methods
DataTables Excel cell style
DataTables custom row buttons
Functie en array
DataTables percentage bar renderer plugin v1.1
Bootstrap Dynamic Modal
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!