Gridview jquery se pierde cuando recargo datatable
Stack Overflow en español Asked by Ibeth Carmona on December 23, 2020
Estoy trabajando con GridView y Jquery en Asp.Net C# para traer los datos de una tabla y que cuando use el datatable me pagine y haga búsqueda sobre los datos
Para ello tengo:
<%@ Page Title="" Language="C#" MasterPageFile="~/PaginaPrincipal.Master" AutoEventWireup="true" CodeBehind="Novedad.aspx.cs" Inherits="Seguimiento_Facturacion.Novedad" ClientIDMode="Static" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="CSS/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="JS/plugins/datatables/jquery.dataTables.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdatePanel ID="upPanel" runat="server">
<ContentTemplate>
<section class="content-header">
<h1 style ="text-align:center">NOVEDADES</h1>
</section>
<section class="content">
<div class="box-header">
<h3 style="text-align:left" class="box-title">INICIATIVA</h3>
</div>
<div class="row">
<div class="col-md-4">
<div class="box box-primary">
<div class="box-body">
<div class="form-group">
<label>Identificación Iniciativa</label>
</div>
<div class="input-group">
<asp:TextBox ID="txtDNI" CssClass="form-control" runat="server" MaxLength="8"></asp:TextBox>
<div class="input-group-btn">
<%--<asp:Button ID="btnBuscar" runat="server" CssClass="btn btn-danger" Text="BUSCAR" />--%>
<asp:Button ID="btnBuscarIni" runat="server" CssClass="btn btn-danger" Text="BUSCAR" OnClick="btnBuscarIni_Click"/>
</div>
</div>
<br />
<div class="form-group">
<label>Descripcion</label>
<asp:TextBox ID="TxtDescripcion" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
</div>
<div class="form-group">
<label>Cliente</label>
<asp:TextBox ID="txtNombres" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
</div>
<div class="form-group">
<label>Cuenta</label>
<asp:TextBox ID="txtCuenta" CssClass="form-control" runat="server" Enabled="false"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-body">
<div class="form-group">
<label>Piezas</label>
</div>
<div class="input-group-btn">
<%--<asp:Button ID="btn_Nueva_Pieza" runat="server" CssClass="btn btn-danger" Text="Adicionar Pieza" />--%>
<asp:LinkButton ID="btn_Nueva_Pieza" runat="server" CssClass="btn btn-primary" href="#AdicionarPieza" data-toggle="modal">Adicionar Pieza</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<!-- Crear Gread View -->
<asp:GridView ID="grdPiezas" runat="server" CssClass =" table table-bordered table-hover"
AutoGenerateColumns ="false" ShowFooter="false" DataKeyNames ="IdPieza">
<HeaderStyle BackColor ="#006699" Font-Bold="true" ForeColor ="White" HorizontalAlign="Center" />
<FooterStyle BackColor ="White " ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Center" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="lblPiezaHeader" runat="server" Text="Pieza"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblPieza" runat="server" Text='<%#Eval("Descripcion") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="lblLineaNegHeader" runat="server" Text="Linea Neg"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblLineaNeg" runat="server" Text='<%#Eval("LINEANEG") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="lblCategoriaHeader" runat="server" Text="Categoria"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblCategoria" runat="server" Text='<%#Eval("CATEGORIA") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="lblEditarHeader" runat="server" Text="Editar"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<%--<asp:ImageButton ImageUrl ="~/Imagenes/edit.ico" runat="server" CommandName ="Editar" />--%>
<%--<asp:Label ID="lblCategoria" runat="server" Text='<%#Eval("CATEGORIA") %>'></asp:Label>--%>
<asp:LinkButton ID="btn_Editar_Pieza" CommanArgument ='<%# Eval("IdPieza") %>' CommandName="EditarPieza" runat="server" CssClass="btn btn-primary" href="#AdicionarPieza" data-toggle="modal"> <img src="Imagenes/edit.ico"/></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:GridView ID="grdPiezas_1" runat="server" AutoGenerateColumns="false" CssClass ="display">
<Columns>
<asp:BoundField Datafield="Descripcion" HeaderText="Pieza" SortExpression="Pieza"/>
<asp:BoundField Datafield="Categoria" HeaderText="Categoria" SortExpression="Categoria"/>
</Columns>
</asp:GridView>
<%-- <!-- Datatable Part -->
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Piezas</h3>
</div>
<div class ="box-body table-responsive">
<table id="tbl_iniciativas" class="table table-bordered table-hover text-center">
<div class="row">
<div class="col-md-12">
<asp:GridView ID="grdPiezas" runat="server" AutoGenerateColumns="false" CssClass ="display">
<Columns>
<asp:BoundField Datafield="Descripcion" HeaderText="Pieza" SortExpression="Pieza"/>
<asp:BoundField Datafield="Categoria" HeaderText="Categoria" SortExpression="Categoria"/>
</Columns>
</asp:GridView>
</div>
</div>
<tbody id="tbl_body_table">
<!-- DATA POR MEDIO DE AJAX-->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End Datatable -->
--%>
</section>
<%--Modal para la creacion de Piezas--%>
<div class="modal fade" id="AdicionarPieza" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Header de la ventana -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h2 class="modal-title"><i class="fa fa-clock-o"></i>Adicionar Pieza</h2>
</div>
<!-- Body de la ventana -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<div class="box-body">
<div class="form-group">
<label>Descripción</label>
</div>
<div class="form-group">
<asp:TextBox ID="txtDescripPieza" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<label>Unidad de Negocio</label>
</div>
<div class="form-group">
<asp:DropDownList ID="ddUnidadNeg" runat="server" CssClass="form-control"></asp:DropDownList>
</div>
<div class="form-group">
<label>Categoría</label>
</div>
<div class="form-group">
<asp:DropDownList ID="ddCategoria" runat="server" CssClass="form-control"></asp:DropDownList>
</div>
<div class="form-group">
<label>Línea de Negocio</label>
</div>
<div class="form-group">
<asp:DropDownList ID="ddLineaNeg" runat="server" CssClass="form-control"></asp:DropDownList>
</div>
<div class="form-group">
<label>Unidades</label>
</div>
<div class="form-group">
<asp:TextBox ID="txtUnidades" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<label>Valor Unitario</label>
</div>
<div class="form-group">
<asp:TextBox ID="txtValorUnit" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-body">
<div class="form-group">
<label>Requiere Diseño</label>
</div>
<div class="form-group">
<asp:RadioButtonList ID="rbReqDiseno" runat="server" TextAlign="Left" CellPadding = "20" CellSpacing = "20" RepeatLayout="Table" RepeatColumns = "2" Width="25%" >
<asp:ListItem Selected="True">No</asp:ListItem>
<asp:ListItem>Si</asp:ListItem>
</asp:RadioButtonList>
</div>
<div class="form-group">
<label>Requiere Desarrollo</label>
</div>
<div class="form-group">
<asp:RadioButtonList ID="rbReqDesa" runat="server" TextAlign="Left" CellPadding = "20" CellSpacing = "20" RepeatLayout="Table" RepeatColumns = "2" Width="25%" >
<asp:ListItem Selected="True">No</asp:ListItem>
<asp:ListItem>Si</asp:ListItem>
</asp:RadioButtonList>
<%-- <div class="radio">
<label for="NoDesa">No</label>
<input type="radio" name="opReqDesarrollo" id="NoDesa" checked/>
<label for="SiDesa">Si</label>
<input type="radio" name="opReqDiseño" id="SiDesa" />
</div>--%>
</div>
<div class="form-group">
<label>Activo</label>
</div>
<div class="form-group">
<asp:RadioButtonList ID="rbActivo" runat="server" TextAlign="Left" CellPadding = "20" CellSpacing = "20" RepeatLayout="Table" RepeatColumns = "2" Width="25%" >
<asp:ListItem Selected="True">No</asp:ListItem>
<asp:ListItem>Si</asp:ListItem>
</asp:RadioButtonList>
<%-- <div class="radio">
<label for="NoActivo">No</label>
<input type="radio" name="opActivo" id="NoActivo" checked/>
<label for="SiActivo">Si</label>
<input type="radio" name="opActivo" id="SiActivo" />
</div>--%>
</div>
<div class="form-group">
<label>Fecha Estimada Inicio Proyecto:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<asp:TextBox ID="txtFecIniProy" CssClass="form-control" data-inputmask="'alias': 'dd/mm/yyyy'"
data-mask="" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pie de la Ventana -->
<div class="modal-footer clearfix">
<asp:Button ID="btnGuardarPieza" runat="server" CssClas="btn btn-primary" Text="Guardar" OnClick="btnGuardarPieza_click" OnClientClick="$('#AdicionarPieza').modal('hide');"/>
<%--<button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>--%>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="server">
<script src="js/plugins/input-mask/jquery.inputmask.js"></script>
<script src="js/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="js/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="js/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="js/plugins/moment/moment.min.js"></script>
<script src="JS/Novedades.js" type="text/javascript"></script>
</asp:Content>
Cuando cargo la primera vez el gridview se muestra bien
Pero cuando hago una búsqueda de un nuevo dato y vuelvo a cargar la tabla se desaparece el formato de paginaciòn, búsqueda y ordenamiento.
Cuando hago la carga utilizo:
$(document).ready(function ()
{
$('#grdPiezas').DataTable();
});
y el aspx
private void LlenarGridViewPiezas()
{
List<ListaPiezas> ListaPiezasIni = PiezaLN.getInstance().ListarPiezas(12);
grdPiezas.DataSource = ListaPiezasIni;
grdPiezas.DataBind();
grdPiezas.UseAccessibleHeader = true;
grdPiezas.HeaderRow.TableSection = TableRowSection.TableHeader;
grdPiezas.FooterRow.TableSection = TableRowSection.TableFooter;
}
Es decir, cuando vuelvo a ejecutar el codigo de LLenarGridViewPiezas sin recargar la página me aparece así:
Agradezco si alguien me puede ayudar ya que llevo bastante tiempo tratando de encontrar una solución a la búsqueda, ordenamiento y paginacion y esta forma es perfecto solo que no me funciona adecuadamente cuando hago una consulta a la base de datos y quiero verla en el gridview.
One Answer
No tiene ninguna relacion el Gridview con el DataTable, no aplican juntos. Deberias revisar la documentacion del DataTable:
veras que los datos aplican sobre un <table> de html
En el ejemplo define
<table id="example" class="display" style="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>
Para luego asignar los datos que viene por ajax
$(document).ready(function() {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
No mezcles controles de servidor como son los de asp.net con controles de jquery es para dolor de cabeza, porque los server control tienen eventos al servidor y requierne un render de la pagina, pero los de ajax no lo necesitan porque las llamadas solo envian los datos y son una llamada ajax asincrona
Answered by Leandro Tuttini on December 23, 2020
Add your own answers!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- Jon Church on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Peter Machado on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?