Estoy trabajando en un proyecto web en la que tengo que agregar una ventana de consultas. Para esto agregué una GridView de asp (<asp:GridView/>
).
En otros proyectos de mi trabajo hay una function
de JavaScript que me permite acomodar mejor el paginado, acomodar la cantidad de registros que se quieren ver, exportar a excel, imprimir, etc. Pero tengo el problema de que en este sitio, esta function
no me estaría reconociendo el GridView y no encuentro el motivo.
Definición del GridView:
<script type="text/javascript" src="js/Inicio.js"></script>
<div id="divGrilla">
<asp:GridView ID="gvCheckList" runat="server" AllowPaging="true" CssClass="table table-striped table-hover" GridLines="None" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="ID Registro" Visible="false">
<ItemTemplate>
<asp:Label ID="id" runat="server" Text='<%# Eval("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fecha y Hora" Visible="true">
<ItemTemplate>
<asp:Label ID="FechaHora" runat="server" Text='<%# Eval("FechaHora") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Puesto" Visible="true">
<ItemTemplate>
<asp:Label ID="DescriPuesto" runat="server" Text='<%# Eval("Descripcion") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Patente" Visible="true">
<ItemTemplate>
<asp:Label ID="Patente" runat="server" Text='<%# Eval("Patente") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="btnMapa" runat="server" Text="Ver más" CssClass="btn btn-info" OnClick="AbreModal" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Y este es el código de la function
:
$(document).ready(function () {
$('[id$=gvCheckList]').prepend($("<thead></thead>").append($('[id$=gvCheckList]').find("tr:first"))).DataTable({
dom: '<"bottom"B>lfrtip',
'iDisplayLength': 5,
"responsive": true,
"sPaginationType": "full_numbers",
lengthMenu: [[5, 10, 20, 50, -1], ['5', '10', '20', '50', 'Todos']],
buttons: {
dom: {
container: {
tag: 'div',
className: 'flexcontent'
},
buttonLiner: {
tag: null
}
},
buttons: [
{
extend: 'print',
text: '<i class="fas fa-print"></i>',
title: 'GeoPosiciones',
titleAttr: 'Imprimir',
className: 'btn btn-primary',
exportOptions: { modifier: { page: 'all' } }
},
{
extend: 'excelHtml5',
text: '<i class="fas fa-file-excel"></i>',
title: 'GeoPosiciones',
titleAttr: 'Excel',
className: 'btn btn-primary',
filename: 'GeoPosiciones',
exportOptions: { modifier: { page: 'all' } }
},
{
extend: 'csvHtml5',
text: '<i class="fas fa-file-alt"></i>',
title: 'GeoPosiciones',
titleAttr: 'Texto CSV',
className: 'btn btn-primary',
filename: 'GeoPosiciones',
exportOptions: { modifier: { page: 'all' } }
},
{
extend: 'pdfHtml5',
text: '<i class="fas fa-file-pdf"></i>',
title: 'GeoPosiciones',
titleAttr: 'pdf',
className: 'btn btn-primary',
filename: 'GeoPosiciones',
orientation: 'portait',
pageSize: 'A4',
exportOptions: { modifier: { page: 'all' }, columns: ':visible' },
customize: function (doc) {
doc.styles.title = {
color: '#4c8aa0',
fontSize: '30',
alignment: 'center'
}
doc.styles['td:nth-child(2)'] = {
width: '100px',
'max-width': '100px'
},
doc.styles.tableHeader = {
fillColor: '#4c8aa0',
color: 'white',
alignment: 'center'
},
doc.content[1].margin = [100, 0, 100, 0]
}
}
]
}
});
});
En este caso, todo el código del JavaScript lo copié de otro proyecto web que está funcionando. La única diferencia que tiene con respecto al original es el id de la GridView, ya que en este programa es diferente al original.
Este debería ser el resultado:
Pero se ve de esta manera, que es como si no hubiese agregado el código del JavaScript:
(Las imágenes son para darles una idea de cómo debería salir y como sale la GridView, por eso la diferencia entre las columnas de la definición del principio y las columnas de las imágenes)
¿Por qué motivo puede ser que no me muestre nada?