jQuery如何分頁Gridview？

Question

我想用jquery為我的GridView control這樣的演示： 這里

我是jquery新手，如何像Demo一樣使用分頁到GridView？

這是我的html：

      <asp:GridView PageSize="5"   OnPreRender="gvListCash_PreRender"   CssClass="footable" AllowPaging="true"  Width="100%" DataSourceID="SqlDataSource3"   ID="gvListCash"  RowStyle-Wrap="false" runat="server" AutoGenerateColumns="False" DataKeyNames="id"  >
               <Columns>
                    <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True" SortExpression="id" />
                    <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                    <asp:BoundField DataField="type" HeaderText="type" SortExpression="type" />
                      <asp:BoundField DataField="price" HeaderText="price" SortExpression="price" />


                </Columns>

         </asp:GridView>

<script type="text/javascript">
         $(function () {
             $('table').footable();

             $('.colour-switch a').click(function (e) {
                 e.preventDefault();
                 $('.colour-switch a').each(function () {
                     $('table').removeClass($(this).data('class'));
                 });
                 $('table').addClass($(this).data('class'));
             });
         });
 </script>

這是我的項目演示圖像：

我為我的gridview設置了PagerStyle-CssClass="pagination pagination-centered" ，但是它不起作用！

Answer 1

U可以使用下面的鏈接，它非常簡單並且在邏輯上很好用。

http://aspsnippets.com/Articles/Paging-in-ASPNet-GridView-using-jQuery-AJAX.aspx