/welcome_message.php

## welcome_message.php
<!DOCTYPE html>
<html lang="pt_BR">
<head>
	<meta charset="utf-8">
	<title>Bower, DataTable e CodeIgniter - Parte 2</title>

	<!-- Folhas de estilo utlizadas no exemplo -->
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<h1>Datatables</h1>
				<!-- Link para atualizar o conteúdo do DataTable -->
				(<a href="javascript:void(0)" id="btn-atualiza-datatable">Atualizar Datatable</a>)
				<hr />
				<!-- Tabela que será renderizada com o DataTable -->
				<!-- As colunas da tabela foram alteradas em relação à primeira versão, para que se tornassem compatíveis com os dados dinâmicos -->
				<table id="example" class="display" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>ID</th>
							<th>Nome</th>
							<th>Telefone</th>
							<th>Cidade</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th>ID</th>
							<th>Nome</th>
							<th>Telefone</th>
							<th>Cidade</th>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>

	<!-- Insere os arquivos JS necessários para o exemplo -->
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>

	<script>
	$(document).ready(function() {
		//Definimos uma variável para receber o DataTable
		//Essa variável vai permitir exexcutar operações com o DataTable posteriormente
		var el_datatable = $('#example').DataTable({
			"language":{ //Altera o idioma do DataTable para o português do Brasil
				"url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
			},
			"processing": true, //Exibe a informação de que o conteúdo está sendo processado
			"serverSide": false, //Define se a busca e a paginação serão a nivel server-side ou client-side
			"ajax": {
				"url": './get_datatable_data', //Define a url onde será feita a solicitação dos dados
				"type": "GET" //Define o tipo da solicitação
			},
			//Como os dados que estão sendo retornados vieram da conversão de um array
			//chave-valor, então definimos quais são as colunas que deverão ser utilizadas
			//em suas respectivas ordens
			"columns": [
				{ "data": "id" },
				{ "data": "nome" },
				{ "data": "telefone", "orderable" : false }, //aqui definimos que a coluna não deve permitir ordenação
				{ "data": "cidade"}
			]
		});
		//Criamos um ação no evento onclick do elemento cujo ID é "btn-atualiza-datatable"
		//que irá dar um reload nos dados do DataTable
		$("#btn-atualiza-datatable").click(function(){
			//função responsável por executar o reload do DataTable
			el_datatable.ajax.reload();
			return false;
		});
	});
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="pt_BR">
	<head>
	<meta charset="utf-8">
	<title>Bower, DataTable e CodeIgniter - Parte 2</title>

	<!-- Folhas de estilo utlizadas no exemplo -->
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.css">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-lg-12">
	<h1>Datatables</h1>
	<!-- Link para atualizar o conteúdo do DataTable -->
	(<a href="javascript:void(0)" id="btn-atualiza-datatable">Atualizar Datatable</a>)
	<hr />
	<!-- Tabela que será renderizada com o DataTable -->
	<!-- As colunas da tabela foram alteradas em relação à primeira versão, para que se tornassem compatíveis com os dados dinâmicos -->
	<table id="example" class="display" cellspacing="0" width="100%">
	<thead>
	<tr>
	<th>ID</th>
	<th>Nome</th>
	<th>Telefone</th>
	<th>Cidade</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<th>ID</th>
	<th>Nome</th>
	<th>Telefone</th>
	<th>Cidade</th>
	</tr>
	</tfoot>
	</table>
	</div>
	</div>
	</div>

	<!-- Insere os arquivos JS necessários para o exemplo -->
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>

	<script>
	$(document).ready(function() {
	//Definimos uma variável para receber o DataTable
	//Essa variável vai permitir exexcutar operações com o DataTable posteriormente
	var el_datatable = $('#example').DataTable({
	"language":{ //Altera o idioma do DataTable para o português do Brasil
	"url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
	},
	"processing": true, //Exibe a informação de que o conteúdo está sendo processado
	"serverSide": false, //Define se a busca e a paginação serão a nivel server-side ou client-side
	"ajax": {
	"url": './get_datatable_data', //Define a url onde será feita a solicitação dos dados
	"type": "GET" //Define o tipo da solicitação
	},
	//Como os dados que estão sendo retornados vieram da conversão de um array
	//chave-valor, então definimos quais são as colunas que deverão ser utilizadas
	//em suas respectivas ordens
	"columns": [
	{ "data": "id" },
	{ "data": "nome" },
	{ "data": "telefone", "orderable" : false }, //aqui definimos que a coluna não deve permitir ordenação
	{ "data": "cidade"}
	]
	});
	//Criamos um ação no evento onclick do elemento cujo ID é "btn-atualiza-datatable"
	//que irá dar um reload nos dados do DataTable
	$("#btn-atualiza-datatable").click(function(){
	//função responsável por executar o reload do DataTable
	el_datatable.ajax.reload();
	return false;
	});
	});
	</script>

	</body>
	</html>