Last active
August 8, 2016 23:57
-
-
Save jlamim/32c2242d1e32706f43e6ae5bbe51e45e to your computer and use it in GitHub Desktop.
Bower, DataTable e CodeIgniter - welcome_message.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Bower, DataTable e CodeIgniter</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 --> | |
<table id="example" class="display" cellspacing="0" width="100%"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Position</th> | |
<th>Office</th> | |
<th>Extn.</th> | |
<th>Start date</th> | |
<th>Salary</th> | |
</tr> | |
</thead> | |
<tfoot> | |
<tr> | |
<th>Name</th> | |
<th>Position</th> | |
<th>Office</th> | |
<th>Extn.</th> | |
<th>Start date</th> | |
<th>Salary</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 | |
} | |
}); | |
//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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment