Part 1: jQuery Datatables Example and Demos Using Rest WebService

jQuery Datatables is very popular open source jQuery grid plugin Which is used to convert HTML table into powerful grid. jQuery Datatable has many supported plugins for specific use like export table data into pdf, csv and excel etc.

The Datatables is a very flexible and most customizable HTML table grid plugin, and will add many advanced interaction controls to any HTML table. jQuery Datatables supports pagination, instant search and multi-column ordering. You can use any data source XML, JSON etc with jQuery Datatable.

Here, I am creating simple listing of records using HTTP GET Rest Service. Rest service help to get json data from database and use JavaScript to processed Rest response data as jQuery datatable required in data format. We will add searching, pagination and sorting on table listing.

I have processed json data then passed to jQuery datatable as a source data.

jQuery Datatable listing Example with JSON Data

You can also check other tutorials of jQuery datatables,

• Datatables Example with JSON Data Using Rest WebService
• Exporting a DataTable into PDF File
• Exporting a DataTable to CSV
• DataTables Export to Excel using HTML5

Step 1: Created a new index.html file and included all jQuery datatables, dependencies files into head section of index.html file.

 	 	 	 	 	 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   	 	 	 	 	 	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
  <script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>

Step 2: Added HTML table layout for datatables listing into the index.html file.

<table id="photos" class="display" cellspacing="0" width="100%">






<thead>






<tr>






<th>User ID</th>












<th>Title</th>












<th>Body</th>






</tr>






</thead>






        
</table>

The table id is '#photos' and will use to bind jQuery datatable method.

Step 3: Fetched data from Restful web service and processed data as required for jQuery datatables.

var arrayReturn = [];
            $.ajax({
                url: "https://jsonplaceholder.typicode.com/posts",
                async: false,
                dataType: 'json',
                success: function (data) {
					for (var i = 0, len = data.length; i < len; i++) {
						var desc = data[i].body;
						arrayReturn.push([ data[i].userId, '<a href="https://google.com" target="_blank" rel="noopener">'+data[i].title+'</a>', desc.substring(0, 12)]);
					}
				inittable(arrayReturn);
                }
            });

Here, I have recieved data as arrays of objects but we need arrays of array data for datatables listing.

Let’s parsed json data using for(.. ..) loop and pushed into new array arrayReturn variable.The Line #11 use for instantiate jQuery datatables on table and passed parsed json data.

Step 4: Passed formatted data to datatables.

function inittable(data) {	
		//console.log(data);
		$('#photos').DataTable( {
			"aaData": data
		} );
	}

aaData : This property hold the json data for table listing.

You can download source code and Demo from below link.