DataTables is a powerful jQuery plugin for creating html table. It provides searching, sorting and pagination without any configuration.  

You will learn some of the basics of DataTable and how to easily implement datatable in your own website projects.

Let's assume you have this array of data that you would like to create a html table using datatables framework:

//ajax row data
var ajax_data =
[
	{fname:"Code", lname:"With Mark", email:"[email protected]"}, 
	{fname:"Mary", lname:"Moe", email:"[email protected]"},
	{fname:"John", lname:"Doe", email:"[email protected]"},
	{fname:"Julie", lname:"Dooley", email:"[email protected]"},
]

DataTable Libraries

First you will need to include two datatables libraries:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
 

Note: Datatables has a dependence on jQuery. So, you will need to include jQuery in your project as well.

Convert Array Into DataTable Array Values

Next you will need to convert your ajax_data(from above) into array values.

In jQuery you can easily do it like this:

//--->convert it into datatable arrays > start
var data_table_arr = []
$.each(ajax_data, function(index, val) 
{
	data_table_arr.push([
		val.fname,
		val.lname,
		val.email,			
	])	 
});
//--->convert it into datatable arrays > end

Use DataTable Function

Lastly, you use the datatables function to output your html table

//id of your datatable where you want populate your table data
$('#your-table').DataTable( 
{
	data: data_table_arr,
	"lengthMenu": [ [10,25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
	"pageLength": 25,
	columns: [
		{ title: 'fname' },
		{ title: "lname" },				 
		{ title: "email" },				 
	],    	       
} );

Full DataTables Source Code

<!DOCTYPE html>
<html lang="en">
<head>
	<title>DataTables </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
 
	<script type="text/javascript">
	$(document).ready(function($)
	{
		//ajax row data
		var ajax_data =
		[
			{fname:"Code", lname:"With Mark", email:"[email protected]"}, 
			{fname:"Mary", lname:"Moe", email:"[email protected]"},
			{fname:"John", lname:"Doe", email:"[email protected]"},
			{fname:"Julie", lname:"Dooley", email:"[email protected]"},
		]

		//--->convert it into datatable arrays > start
		var data_table_arr = []
		$.each(ajax_data, function(index, val) 
		{
			data_table_arr.push([
				val.fname,
				val.lname,
				val.email,
					
			])
			 
		});
		//--->convert it into datatable arrays > end

 
 		//id of your datatable you want populate rows for
	    $('#your-table').DataTable( 
	    {
	    	data: data_table_arr,
	    	"lengthMenu": [ [10,25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
			"pageLength": 25,
	    	columns: [
				{ title: 'fname' },
				{ title: "lname" },				 
				{ title: "email" },				 
			],    	       
	    } );
	}); 
	</script>
</head>
<body>

<table id="your-table"  class="table table-hover table-bordered "  width="100%"></table>
 
</body>
</html>

DataTable Demo









Name

Email

Website

Comment

Post Comment