DataTables - grid javascript

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > ASP Controls >

DataTables - grid javascript

Previous pageReturn to chapter overviewNext page

Fonte

 

https://www.datatables.net/

 

O que é

 

Grade Javascript com limitação de registros, ordenação, pesquisa em tempo real e paginação

 

 

Tela

 

datatables

 

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 tdth {

            padding-left10px;

            padding-right10px;

        }

    </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