使用 JQuery 进行客户端 Gridview 分页

• 下载jquery分页插件 - 1.92 KB
• 下载演示 - 28.65 KB

介绍 

在这里，我想展示如何使用Jquery的**表格分页插件**实现客户端Gridview分页，该插件由Ryan Zielke开发。

Using the Code

首先创建一个名为“images”的文件夹。然后将所有图像文件粘贴到该文件夹中。

接下来，在ASPX页面中添加Jquery和插件JavaScript文件的引用。

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.tablePagination.0.1.js" type="text/javascript"></script>

然后添加下面的CSS代码。这里#testTable的Width值必须与你的Gridview控件的Width值相同。

#testTable { 
            width : 300px;
            margin-left: auto; 
            margin-right: auto; 
          }
          
           #tablePagination { 
            background-color:  Transparent; 
            font-size: 0.8em; 
            padding: 0px 5px; 
            height: 20px
          }
          
          #tablePagination_paginater { 
            margin-left: auto; 
            margin-right: auto;
          }
          
          #tablePagination img { 
            padding: 0px 2px; 
          }
          
          #tablePagination_perPage { 
            float: left; 
          }
          
          #tablePagination_paginater { 
            float: right; 
          }

最后，在你的ASPX页面中添加这段脚本。

<script type ="text/javascript" >
	$(document).ready(
 	function() {
 	$('table').tablePagination({});
 	});
 	</script> 

现在，在代码隐藏文件中添加Gridview1_PreRender方法，否则在分页期间你将看不到Gridview的表头。通常，Gridview不会为在浏览器中呈现时生成的表格使用tbody、thead或tfoot标签。因此，对于Tbody和Thead，我们需要添加此函数。

 protected void GridView1_PreRender(object sender, EventArgs e)
 {
     GridView1.UseAccessibleHeader = false;
     GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
 }

配置

您可以更改jquery.tablePagination.0.1.js的不同参数。以下是作者网站上的一些设置：

• firstArrow - 图片 - 传入一个图片来替换默认图片。
  默认值：(new Image()).src="./images/first.gif"
• prevArrow - 图片 - 传入一个图片来替换默认图片。
  默认值：(new Image()).src="./images/prev.gif"
• lastArrow - 图片 - 传入一个图片来替换默认图片。
  默认值：(new Image()).src="./images/last.gif"
• nextArrow - 图片 - 传入一个图片来替换默认图片。
  默认值：(new Image()).src="./images/next.gif"
• rowsPerPage - 数字 - 用于确定每页起始行数。
  默认值：5
• currPage - 数字 - 用于确定起始当前页码。默认值：1
• optionsForRows - 数组 - 用于设置每页行数的值。
  默认值：[5,10,25,50,100]
• ignoreRows - 数组 - 用于指定要忽略哪些'tr'行。建议将这些行设置为不可见，因为它们会影响页面计数。
  默认值：[]。

关于表格分页插件的未来版本

• 查看Ryan Zielke的网站 http://neoalchemy.org/index.html

历史

• 2009年6月10日：初始发布