DataTables

DataTables Examples

by Heber Holanda

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">
  </table>
</div>

CSS

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}

JavaScript

var results;
var allResults = [];

$(document).ready(function () {
    execCrossDomainRequest();
});

function execCrossDomainRequest() {
	var call_1 = $.getJSON("https://swapi.co/api/people/", function(data){
  	console.log("Call 1 Run!");
    $.each(data.results, function(i,v) {
      allResults.push({
        'name': v.name,
        'height': v.height,
        'hair_color': v.hair_color,
        'skin_color': v.skin_color,
        'gender': v.gender
      });
      
    });
  })
		.success(function(){
    	console.log("Call 1 - second success"); 
		})
		.error(function(){
    	console.log("Call 1 - error"); 
    })
  ;
  
	var call_2 = $.getJSON("https://swapi.co/api/people/?page=2", function(data){
  	console.log("Call 2 Run!");
      $.each(data.results, function(i,v) {
        allResults.push({
          'name': v.name,
          'height': v.height,
          'hair_color': v.hair_color,
          'skin_color': v.skin_color,
          'gender': v.gender
        });
      });
    
  })
		.success(function(){
    	console.log("Call 2 - second success"); 
		})
		.error(function(){
    	console.log("Call 2 - error"); 
    })
  ;
  
/*
	var call1 = $.ajax({
		url: "https://swapi.co/api/people/",
		method: "GET",
		//headers: { "Accept": "application/json; odata=verbose" },
		success: successHandler,
		error: errorHandler
	});

	var call2 = $.ajax({
		url: "https://swapi.co/api/people/?page=2",
		method: "GET",
		//headers: { "Accept": "application/json; odata=verbose" },
		success: successHandler,
		error: errorHandler
	});
*/
  function successHandler(a) {
		//var jsonObject = JSON.parse(a.results);
		//results = jsonObject.d.results;
    
    results = a.results;
    console.log(results);
		if (allResults.length > 0) {
			allResults = allResults.concat(results);
		}
		else {
			allResults = results;        
		}
  }

  function errorHandler(data, errorCode, errorMessage) {
     console.log("Could not complete cross-domain call: " + errorMessage);        
  };

 ...