Well I did a paging with the twbsPagination plugin, it works perfectly but it does not list the amount of elements per page. What have I done wrong? I wanted you to list 4 elements per page. Look at the code:
Plugin LINK: link
CODE:
// paginação
var page = 1;
var is_ajax_fire = 0;
var current_page = 7;
var total_page = 3;
// retorna os clientes cadastrados
manageData();
retorna_fornecedor();
retorna_estados();
function manageData() {
$.ajax({
dataType: 'json',
url: url_base + "clientes",
data: {page:page}
}).done(function(data){
$('#paginacao-clientes').twbsPagination({
totalPages: total_page,
visiblePages: current_page,
onPageClick: function (event, pageL) {
page = pageL;
if(is_ajax_fire != 0){
getPageData();
}
}
});
retorna_cliente(data);
is_ajax_fire = 1;
});
}
function getPageData()
{
$.ajax({
dataType: 'json',
url: url_base + "clientes",
data: {page:page}
}).done(function(data) {
retorna_cliente(data);
});
}
RETURN CUSTOMERS. FUNCTION:
function retorna_cliente(data)
{
var id_cliente = "";
var nome_cliente = "";
var data_nascimento_cliente = "";
var telefone_cliente = "";
var celular_cliente = "";
var cpf_cliente = "";
var endereco_cliente = "";
var email_cliente = "";
var container_mostra_cliente = $('.mostra_clientes');
var itemHTML = "";
var mensagem_cliente = "Nenhum cliente encontrado";
if (data == 0)
{
$('.cliente-error-registro').css('display','block');
$('.cliente-error-registro .mensagem-erro').html(mensagem_cliente);
}
else
{
itemHTML += "<table id='datatable-checkbox' class='table table-striped table-bordered bulk_action dataTable no-footer' role='grid' aria-describedby='datatable-checkbox_info'>";
itemHTML += "<thead>";
itemHTML += "<tr>";
itemHTML += "<th>";
itemHTML += "<th><input type='checkbox' id='check-all' class='flat'></th>";
itemHTML += "</th>";
itemHTML += "<th>Nome</th>";
itemHTML += "<th>Data de Nascimento</th>";
itemHTML += "<th>Telefone</th>";
itemHTML += "<th>Celular</th>";
itemHTML += "<th>Cpf</th>";
itemHTML += "<th>Endereço</th>";
itemHTML += "<th>Email</th>";
itemHTML += "</tr>";
itemHTML += "</thead>";
$.each(data, function(key,item)
{
id_cliente = item.id;
nome_cliente = item.nome;
data_nascimento_cliente = formataDataSQL(item.data_nascimento);
telefone_cliente = item.telefone;
celular_cliente = item.celular;
cpf_cliente = item.cpf;
endereco_cliente = item.endereco;
email_cliente = item.email;
itemHTML += "<tbody>";
itemHTML += "<tr>";
itemHTML += "<td><th><input type='checkbox' value='" + id_cliente + "' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></th></td>";
itemHTML += "<td>" + nome_cliente + "</td>";
itemHTML += "<td>" + data_nascimento_cliente + "</td>";
itemHTML += "<td>" + telefone_cliente + "</td>";
itemHTML += "<td>" + celular_cliente + "</td>";
itemHTML += "<td>" + cpf_cliente + "</td>";
itemHTML += "<td>" + endereco_cliente + "</td>";
itemHTML += "<td>" + email_cliente + "</td>";
itemHTML += "</tr>";
itemHTML += "</tbody>";
});
itemHTML += "</table>";
container_mostra_cliente.html(itemHTML);
}
}