Creative Tim

Fresh DataTables - Tutorial
This tutorial was made to make the integration as easy as possible.


We restyled the classic DataTables.net and made it look fresh and bright. Here are the files that you need to add in your project.


<head>

<!-- Style -->
<link rel="stylesheet" href="assets/css/bootstrap.css" />
<link rel="stylesheet" href="assets/css/fresh-datatables.css" />

<!-- Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">


</head>
        

This is the main HTML code for the Fresh DataTables. You can create a table with any data or whatever you want. More details about the methods, data manipulations or functions available with this DataTables can be found here.

<div class="fresh-datatables full-color-purple">
	<!--    Available colors for the full background: full-color-blue, full-color-azure, full-color-green, full-color-red, full-color-orange, full-color-purple, full-color-gray
	Available colors only for the toolbar: toolbar-color-blue, toolbar-color-azure, toolbar-color-green, toolbar-color-red, toolbar-color-orange, toolbar-color-purple, toolbar-color-gray
	-->

	<table id="fresh-datatables" class="table table-striped table-no-bordered table-hover">
	<thead>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th class="disabled-sorting">Actions</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Actions</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Garrett Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</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>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Cedric Kelly</td>
			<td>Senior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2012/03/29</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Airi Satou</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>33</td>
			<td>2008/11/28</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Brielle Williamson</td>
			<td>Integration Specialist</td>
			<td>New York</td>
			<td>61</td>
			<td>2012/12/02</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Herrod Chandler</td>
			<td>Sales Assistant</td>
			<td>San Francisco</td>
			<td>59</td>
			<td>2012/08/06</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Rhona Davidson</td>
			<td>Integration Specialist</td>
			<td>Tokyo</td>
			<td>55</td>
			<td>2010/10/14</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Colleen Hurst</td>
			<td>Javascript Developer</td>
			<td>San Francisco</td>
			<td>39</td>
			<td>2009/09/15</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Sonya Frost</td>
			<td>Software Engineer</td>
			<td>Edinburgh</td>
			<td>23</td>
			<td>2008/12/13</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Jena Gaines</td>
			<td>Office Manager</td>
			<td>London</td>
			<td>30</td>
			<td>2008/12/19</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Quinn Flynn</td>
			<td>Support Lead</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2013/03/03</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Charde Marshall</td>
			<td>Regional Director</td>
			<td>San Francisco</td>
			<td>36</td>
			<td>2008/10/16</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Haley Kennedy</td>
			<td>Senior Marketing Designer</td>
			<td>London</td>
			<td>43</td>
			<td>2012/12/18</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Tatyana Fitzpatrick</td>
			<td>Regional Director</td>
			<td>London</td>
			<td>19</td>
			<td>2010/03/17</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Michael Silva</td>
			<td>Marketing Designer</td>
			<td>London</td>
			<td>66</td>
			<td>2012/11/27</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Paul Byrd</td>
			<td>Chief Financial Officer (CFO)</td>
			<td>New York</td>
			<td>64</td>
			<td>2010/06/09</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Gloria Little</td>
			<td>Systems Administrator</td>
			<td>New York</td>
			<td>59</td>
			<td>2009/04/10</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Bradley Greer</td>
			<td>Software Engineer</td>
			<td>London</td>
			<td>41</td>
			<td>2012/10/13</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Dai Rios</td>
			<td>Personnel Lead</td>
			<td>Edinburgh</td>
			<td>35</td>
			<td>2012/09/26</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Jenette Caldwell</td>
			<td>Development Lead</td>
			<td>New York</td>
			<td>30</td>
			<td>2011/09/03</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Yuri Berry</td>
			<td>Chief Marketing Officer (CMO)</td>
			<td>New York</td>
			<td>40</td>
			<td>2009/06/25</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Caesar Vance</td>
			<td>Pre-Sales Support</td>
			<td>New York</td>
			<td>21</td>
			<td>2011/12/12</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Doris Wilder</td>
			<td>Sales Assistant</td>
			<td>Sidney</td>
			<td>23</td>
			<td>2010/09/20</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
		<tr>
			<td>Angelica Ramos</td>
			<td>Chief Executive Officer (CEO)</td>
			<td>London</td>
			<td>47</td>
			<td>2009/10/09</td>
			<td>
				<a href="#" class="like"><i class="fa fa-heart"></i></a>
				<a href="#" class="edit"><i class="fa fa-edit"></i></a>
				<a href="#" class="remove"><i class="fa fa-times"></i></a>
			</td>
		</tr>
	   </tbody>
    </table>
</div>
		

Here are the javascript files that you have to include and the Javascript plugin that you have to call in your page. The core code for the Fresh-DataTables can be found in the 'jquery.dataTables.js'. Here is the code for initialising the table in your page:


 <script src="assets/js/jquery.js"></script>
 <script src="assets/js/jquery.datatables.js"></script>
 <script>

 $(document).ready(function() {
 	$('#fresh-datatables').DataTable({
 		"pagingType": "full_numbers",
 		"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
 		responsive: true,
 		language: {
 		search: "_INPUT_",
 		searchPlaceholder: "Search records",
 		}

 	});


 	var table = $('#fresh-datatables').DataTable();
     // Edit record
     table.on( 'click', '.edit', function () {
 		$tr = $(this).closest('tr');

 		var data = table.row($tr).data();
 		alert( 'You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.' );
     } );

     // Delete a record
     table.on( 'click', '.remove', function (e) {
 		$tr = $(this).closest('tr');
 		table.row($tr).remove().draw();
 		e.preventDefault();
     } );

 	//Like record
 	table.on( 'click', '.like', function () {
 		alert('You clicked on Like button');
     } );
 });

 </script>

         

Besides the default style, we added 7 new colors for the background of Fresh DataTables and for it's Toolbar: blue, azure, green, orange, red, purple, gray. If you want to use one of them, you can use the class for the chosen color: "full-color-{blue | azure | green | orange | red | purple | gray}" or "toolbar-color-{blue | azure | green | orange | red | purple | gray}".

If you want to use the table as Full Screen you have to remove the "div" with class "container" and add the class "full-screen-table" for the "div" that has the class "fresh-datatables".

Many thanks to our friend for open sourcing the base for this DataTables. More details can be found here here.

Get more useful items for Bootstrap on Creative Tim.

© Creative Tim , made with for a better web.