|
<< Click to Display Table of Contents >> DataTables - grid javascript |
  
|
|
<< Click to Display Table of Contents >> DataTables - grid javascript |
|
Fonte
O que é
Grade Javascript com limitação de registros, ordenação, pesquisa em tempo real e paginação
Tela
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Teste</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.css">
</head>
<body>
<table id="grade" class="table table-hover table-striped table-bordered table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
.................................
.................................
.................................
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#grade').on( 'processing.dt', function ( e, settings, processing ) {
$('#div_processando').css('display', processing ? 'block' : 'none');
})
.DataTable({
'aLengthMenu': [[10, 20, 30, 50, 100], [10, 20, 30, 50, 100]],
'iDisplayLength': 20,
"language": {
"search": "Procurar",
"zeroRecords": "Nenhum registro",
"thousands": ".",
"decimal": ",",
"infoFiltered": " - filtrando _MAX_ registros",
"infoEmpty": "Nenhum registro",
"info": "Exibindo página _PAGE_ de _PAGES_",
"lengthMenu": "Mostrar _MENU_ registros",
"paginate": {
"previous": "Anterior",
"next": "Próxima",
"last": "Última",
"first": "Primeira"
}
}
});
});
</script>
</body>
</html>
Versão em aspx com ListView
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.css">
<style>
#grade td, th {
padding-left: 10px;
padding-right: 10px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Conteudo" runat="server">
<div class="row">
<div class="col-lg-12">
<h1>Cliente</h1>
<p>Consulta de Clientes</p>
<div id="div_processando">
<img src="https://www.acpec.com/images/processing.gif" />
</div>
<div class="table-responsive">
<table id="grade" class="display table table-hover table-striped table-bordered table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Fantasia</th>
</tr>
</thead>
<tfoot>
<tr class="text-right">
<th><asp:Label id="lbConta" runat="server"></asp:Label></th>
</tr>
</tfoot>
<tbody>
<asp:ListView ID="lvClientes" runat="server">
<ItemTemplate>
<tr>
<td class="text-right"><%# Eval("id_cliente") %></td>
<td><asp:LinkButton id="lbNome" runat="server" Text='<%# Eval("nome") %>' CommandArgument='<%# Eval("id_cliente") %>' OnCommand="lbNome_Command"></asp:LinkButton> </td>
<td><%# Eval("fantasia") %></td>
</tr>
</ItemTemplate>
</asp:ListView>
</tbody>
</table>
</div>
</div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server">
<script src="/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
$('#grade').on( 'processing.dt', function ( e, settings, processing ) {
$('#div_processando').css('display', processing ? 'block' : 'none');
})
.DataTable({
'aLengthMenu': [[10, 20, 30, 50, 100], [10, 20, 30, 50, 100]],
'iDisplayLength': 20,
"language": {
"search": "Procurar",
"zeroRecords": "Nenhum registro",
"thousands": ".",
"decimal": ",",
"infoFiltered": " - filtrando _MAX_ registros",
"infoEmpty": "Nenhum registro",
"info": "Exibindo página _PAGE_ de _PAGES_",
"lengthMenu": "Mostrar _MENU_ registros",
"paginate": {
"previous": "Anterior",
"next": "Próxima",
"last": "Última",
"first": "Primeira"
}
}
});
});
</script>
</asp:Content>
Fonte cs
using System;
using System.Data;
using System.Web.UI.WebControls;
using Modelo.model;
using Persistencia.my.DAL;
using Site.classes;
namespace Site.main.cliente
{
public partial class cliente_consulta : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
lvClientes.DataSource = ClienteDALMy.Listar(id_acesso);
lbConta.Text = (lvClientes.DataSource as DataTable).Rows.Count.ToString();
lvClientes.DataBind();
}
}
protected void lbNome_Command(Object sender, CommandEventArgs e)
{
string a = e.CommandArgument.ToString();
}
}
}
Observação
Para muitos dados fica meio pesado. Não compensa