Grid View with Advanced Pager using jQuery UI Slider

This is what we will get at the end of the article:
Update(02/05/2013) :: Code Download link: Download

ASP.NET Grid View is a very rich control and support lots of functionalities straight out of the box but sometimes we have to change things based on our own requirements. Today we will look how easily we can change grid view with support of jQuery UI slider to give its pager a nice look.
In this article we will use jQuery scripts and CSS straight from Microsoft CDN so let's start by adding following links:
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js"></script>

First link is for jQuery UI CSS class , Second for jQuery library and Third is for jQueryUI script.
Next we will add a script manager, update panel, and grid view on the page:

<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" CellPadding="4" DataKeyNames="ProductID"
DataSourceID="SqlDataSource1"
EmptyDataText="There are no data records to display." ForeColor="#333333"
GridLines="None" Width="600px" PagerSettings-Visible="false">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="Product ID" ReadOnly="True"
SortExpression="ProductID" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="ProductNumber" HeaderText="Product Number"
SortExpression="ProductNumber" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="StandardCost" HeaderText="StandardCost"
SortExpression="StandardCost" HeaderStyle-HorizontalAlign="Left" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DemoConnectionString%>"
ProviderName="<%$ ConnectionStrings: DemoConnectionString.ProviderName %>"
SelectCommand="SELECT ProductID, Name, ProductNumber, StandardCost FROM SalesLT.Product">
</asp:SqlDataSource>

</ContentTemplate>
</asp:UpdatePanel>

We have added SqlDataSource after grid view to fetch data from sample database.
If you notice we have set allow paging property to true and pager-settings visible property of grid view to false so we can add our own pager on the page instead of using gridview's pager.
Now we will add two div elements first one is going to be for jQuery Slider and second is for displaying current page.
<div id="slider" style="width:600px;"></div>
<div id="sliderValue" style="background-color:#507CD1;font-weight:bold;color:White; width:600px;padding:2px;"><%=GridView1.PageIndex +1 %></div>

It's time to add out JavaScript to make our pager work:
<script type="text/javascript">
$(function () {
//Get current page index and add 1(one) to it because by default index start from 0
var currentPageNumber = parseInt('<%=GridView1.PageIndex +1 %>');

// Get total number of pages for grid view
var maxPages = parseInt('<%= GridView1.PageCount %>');


// Calling jQuery Slider method to create slider control on the page
$('#slider').slider({
range: "min",
min: 1,
max: maxPages,
value: currentPageNumber,
slide: function (event, ui) {
// Calling asp.net's __doPostBack javascript function to cause postback using javascript
__doPostBack('<%= GridView1.UniqueID %>', 'Page$' + (ui.value));
$('#sliderValue').text("Current Page is: "+ui.value);
}
});

});
</script>

When we view our page in browser, this is what it's going to look like: