none
Substituir Gridview por Jquery Datatable vinculado ao mysql, como fazer? RRS feed

  • Pergunta

  • Pessoal,


    Sei usar funções simples do jquery, como chamar algo na tela, mas não faço a menor idéia de como vincular ao code behind onde estão os datasets e etc

    Gostaria de usar esse jquery:

    http://www.datatables.net/

    http://live.datatables.net/#preview

    Porém não acho qualquer exemplo deste datatable no aspx/.Net


    Por exemplo com gridview seria desta forma

    no aspx

     <asp:GridView ID="GridViewTeste" runat="server" CellPadding="1" CellSpacing="1" 
                Height="0px" Style="  ;
                 Width="1220px" onrowdatabound="GridViewTeste_RowDataBound"><HeaderStyle BackColor="LightBlue"  BorderColor="LightBlue" Height="0px" Font-Size="Smaller" BorderStyle="Solid"/></asp:GridView>


    code behind:

                    dsTeste = ControleTeste.recuperarTeste(this.teste1.Text, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0);
                    Session["dsTeste"] = dsTeste;
                    this.GridViewGesge.DataSource = dsTeste;
                    this.GridViewGesge.DataBind();


    E na classe de acesso a dados com mysql/odbc

            public static System.Data.DataSet recuperarTeste(string teste1, string teste2, string teste3, string teste4, string teste5, string teste6, string teste7, string teste8, string teste9, string teste10, string teste11, string teste12, string teste13, string teste14, string teste15, string teste16, string teste17, string teste18, string teste19, string teste20, string teste21, string teste22, string teste23, int teste24)
            {
                DataSet ds = new DataSet();
                if (id == 0)
                {
                    OdbcConnection odbcconex = new OdbcConnection(OdbcConnectionString);
                    odbcconex.Open();
                    string db = "select * from equipgeral where teste1 = ? order by(teste1)  ";
                    OdbcCommand cmd = new OdbcCommand(db, odbcconex);
                    cmd.Parameters.Add("teste1", OdbcType.VarChar, 20).Value = teste1;
                    OdbcDataAdapter da = new OdbcDataAdapter(cmd);
                    da.Fill(ds, "testegeral");
                    odbcconex.Close();
                }
    ...

    Como eu faria para substituir o gridview ligado ao mysql acima para usar o jquery datable:

    http://www.datatables.net/

    ?

    Detalhe que isso seria o básico para mim, pois gostaria de além de tudo usar uma funcionalidade que já uso no griedview, que é colocar um checkbox em cada linha do griedview dinamico, e quando eu clicar no checkbox selecionar a linha clicada. Por exemplo:

           foreach (GridViewRow row in gvVisualizar.Rows)
            {
                
                CheckBox ch = (CheckBox)row.FindControl("cbteste");
    
                if (ch != null)
                {
                    if (ch.Checked)
                    {
                        cbListar.Checked = false;
                        ddlteste.Visible = false;
                        this.tbTeste1.Text = row.Cells[1].Text;
    
                        this.lblteste1.Text = row.Cells[1].Text;
    
    
                        this.tbTeste2.Text = row.Cells[2].Text;
                       
    
                    }
                }
    
    
            }

    Desde já obrigado





    • Editado Angelo.Net terça-feira, 14 de maio de 2013 18:32 Atualização de Código
    terça-feira, 14 de maio de 2013 11:25

Todas as Respostas

  • Opa boa tarde,

    aguarde um momento irei realizar uns testes e já lhe respondo, mas no asp normal tem como utilizar o datatable sem a necessidade de utilizar o

    Gridview!

    terça-feira, 14 de maio de 2013 19:48
  • Certo fiz um exemplo aqui espero que possa lhe ajudar,

    1ª Coisa : você não vai utilizar mais o GridView para poder trabalhar com o DataTable;

    2ª Coisa : Crie uma classe para listar os registros do banco de dados:

    <!-- Classe para armazenar os dados a serem exibidos -->

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;

    namespace ForumAsp
    {
        public class campos
        {
            public string codigo { get; set; }
            public string nome { get; set; }
        }
    }

    <!-- Calsse que busca os dados do banco, no meu caso só fiz um exemplo e não estou indo no banco buscar os dados não -->

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;

    namespace ForumAsp
    {
        public class carregaDados
        {
            public static List<campos> Lista()
            {
                List<campos> registros = new List<campos>();
                campos c = new campos();
                for (int i = 0; i < 5; i++)
                {
                    c.codigo = i.ToString();
                    c.nome = "Teste " + i;
                    registros.Add(c);
                }
                return registros;
            }
        }
    }

    3ª Na Sua tela .aspx vá no source dela e insira e chame a função de listar os dados:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Teste.aspx.cs" Inherits="ForumAsp.Teste" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <!--Cabeçalho da Grid-->
                <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                        </tr>
                    </thead>
                    <!-- Itens da Grid -->
                    <tbody>
                         <!-- "ForumAsp" é o nome do projeto-->
                        <%foreach (var item in ForumAsp.carregaDados.Lista())
                          {
                              Response.Write("<tr>");
                                Response.Write("<td>");
                                    Response.Write(item.nome);
                                Response.Write("</td>");
                                Response.Write("<td>");
                                    Response.Write(item.nome);
                                Response.Write("</td>");
                              Response.Write("</tr>"); 
                          } %>
                    </tbody>
                </table>

            </div>
        </form>
    </body>
    </html>

    espero que isso possa lhe ajudar, estou meio enferrujado no asp, mas espero que lhe ajude, caso tenha alguma dúvida me pergunte!

    terça-feira, 14 de maio de 2013 20:23
  • Prezado Washington, muitíssimo obrigado.


    Gostaria de mais uma ajuda, não sei se fiz algo errado, no exemplo traz repetindo sempre a informação assim:

    Código Nome
    Teste 4 Teste 4
    Teste 4 Teste 4
    Teste 4 Teste 4
    Teste 4 Teste 4
    Teste 4 Teste 4


    O importante é que acho que conseguir entender como trabalhar com datatable, gostaria apenas de mais uma ajuda, gostaria de uma funcionalidade similar a que exemplifiquei do griedview com checkbox para pegar os dados de uma linha, eu faço com o GV assim:

          foreach (GridViewRow row in gvVisualizar.Rows)
            {
                
                CheckBox ch = (CheckBox)row.FindControl("cbteste");
    
                if (ch != null)
                {
                    if (ch.Checked)
                    {
                        cbListar.Checked = false;
                        ddlteste.Visible = false;
                        this.tbTeste1.Text = row.Cells[1].Text;
    
                        this.lblteste1.Text = row.Cells[1].Text;
    
    
                        this.tbTeste2.Text = row.Cells[2].Text;
                       
    
                    }
                }
    
    
            }

    Desta forma eu consigo selecionar os dados de uma linha, e pegar o valor de cada coluna e jogar num textbox da minha aplicação por exemplo, então além de selecionar, eu pego os dados de cada coluna que eu escolher e jogo num textbox.

    Como fazer isso com um Datatable ?

    Aliás, agora me caiu a ficha de uma coisa, fiz no datatable, talvez eu tenha feito algo errado no for, que repetiu estes dados do último item4, sempre quis aprender a fazer um pouco mais "na mão" sem depender do controle gridview.

    Ainda quero aprender a manipular mais ainda este datatable do asp.

    De qualquer forma agora percebi, que estamos falando de datatables diferentes (o que ainda não significa que não será importante esta sua contribuição, muito obrigado mesmo!), o datatable que me referi é esse do jquery:

    http://live.datatables.net/#preview

    Seria aprender a manipular ambos, tanto o do asp, quanto o do jquery, pois sempre haverá espaço para usar um ou outro.

    Pesquisei em toda web em como eu poderia usar este jquery de table numa aplicação asp.net, achei apenas exemplo para MVC e eu não sabia como manipular desta forma.

    Toda a ajuda será bem vinda, tanto para o table do asp, quanto do jquery.

    Abraço! e desde já muito obrigado!



    • Editado Angelo.Net terça-feira, 9 de julho de 2013 20:33 Atualização apra melhor entendimento
    segunda-feira, 20 de maio de 2013 16:39