GridView com paginação assíncrona usando Jquery no Asp.Net
É possível utilizar o GridView, fica muito rápido para paginas e consultas pesadas, fica assim:
Primeiro, cria-se as tabelas e seus respectivos registros:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
CREATE TABLE [dbo].[Articletable]( [ID] [int] NOT NULL, [Title] [varchar](200) NULL, [Description] [varchar](400) NULL, [Author] [varchar](50) NULL ) ON [PRIMARY] GO SET ANSI_PADDING OFF GO INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (1, N'Asp.net C#', N'Add .net Desc', N'Kamar Alam') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (2, N'SQL', N'Sql desc', N'Mehar Alam') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (3, N'Java', N'Java decs', N'Ameba') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (4, N'JQuery', N'Add jquery Desc', N'Kashmir sir') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (5, N'JavaScript', N'This is java script', N'alam') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (6, N'C#.Net', N'This is C#', N'kamar alam') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (7, N'Mvc', N'Model View Architecher', N'Softwares') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (8, N'MVC 5', N'Mvc5 ', N'Aman') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (9, N'VS 2014', N'Visual Studio', N'Vs') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (10, N'Book', N'abcd', N'Meher') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (11, N'Pen', N'jhkkjhkh', N'alam') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (12, N'Note', N'note', N'ameba') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (13, N'Ball', N'ball', N'Ameba') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (14, N'Bat', N'bat', N'Alam') INSERT [dbo].[Articletable] ([ID], [Title], [Description], [Author]) VALUES (15, N'Pencil', N'pencil', N'kamar alam') |
Código da Pagina:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="ClassicGridView.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div style="margin-left:40px;margin-top:40px;"> <h2>Jquery paging in gridview in asp.net</h2> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None" Width="424px" ShowHeader="true" OnPreRender="GridView1_PreRender"> <HeaderStyle CssClass="HeaderStyle" /> <RowStyle CssClass="RowStyle" /> <AlternatingRowStyle CssClass="AltRowStyle" /> <Columns> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="id" /> <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="name" /> <asp:BoundField DataField="Author" HeaderText="Author" SortExpression="name" /> </Columns> </asp:GridView> <ul id="UlPaging" class="pagination"></ul> <script src="jquery-1.10.2.js" type="text/javascript"></script> <script src="jquery.simplePagination.js" type="text/javascript"></script> <link href="simplePagination.css" rel="stylesheet" type="text/css" /> <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="Paging.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { PagingCommon("#GridView1"); } ); </script> </div> </form> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.SqlClient; using System.Configuration; public partial class Default2 : System.Web.UI.Page { SqlConnection con = new SqlConnection(); protected void Page_Load(object sender, EventArgs e) { con.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString; if (con.State == ConnectionState.Closed) { con.Open(); } SqlDataAdapter adp = new SqlDataAdapter("select * from articletable", con); DataSet ds = new DataSet(); adp.Fill(ds); GridView1.DataSource = ds; GridView1.DataBind(); } protected void GridView1_PreRender(object sender, EventArgs e) { GridView1.UseAccessibleHeader = false; GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; } } |
O Arquivo: