当前位置:编程学习 > C#/ASP.NET >>

ASP.NET使用JQuery DataTables使用说明

okay,先不管那个将保存我们奥斯卡提名的数据编码对象。现在,我们有更有趣的事情,让我们先在.aspx页面增加一些标签,让这个东西得以运行。首先,在页面的<head>部分添加默认样式表的链接,以及我们的jquery javascript文件链接。如下:
<link rel="stylesheet" href="Datatables/css/demo_table.css"type="text/css" />
<script type="text/javascript" src="Datatables/js/jquery.js"></script>
<script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>
然后,让我们添加 Repeater,记住,JQuery的DataTables神奇之处在于,他们可以操作任何HTML表额。事实上,他们的网站表明DataTables,“可以给任何HTML表添加高级交互控制”,因此,我们可以将一个表嵌入到我们的Repeater。我猜,大家之前应该都接触(如果你阅读了上一篇文章)过Repeaters和tables,所以我下面的代码,是将表格结构嵌入到Repeater,你可以将下面的代码放到form下,或者指定的 <div>内。
<asp:Repeater ID="rptOscarNominees" runat="server">
<HeaderTemplate>
<table id="tblOscarNominees" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th>Movie</th>
<th>Lead Actor</th>
<th>Lead Actress</th>
<th>Director</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%
# Eval("MovieTitle")
%></td>
<td><%
# Eval("LeadingActor")
%></td>
<td><%
# Eval("LeadingActress")
%></td>
<td><%
# Eval("Director")
%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
正如你所看到的,我们的列名放在了<th>标签里,我们的数据绑定元素放在<td>标签里。DataTables库会很好的处理这一段代码。说到DataTables,要在文档的<head>部分添加JQuery代码,事实上,我们已经在前几分钟添加了<script>的链接。(As you can see, our column names are within <th> tags, and our databound elements are within <td> tags. The DataTables library will take care of being the brains of this operation. Speaking of the DataTables, now would be a good time to add the actual JQuery code to the <head> section of this document. In fact, place the following code directly underneath our <script> links that we added a few minutes ago.)
<script type="text/javascript">
$(document).ready(function() {
$('#tblOscarNominees').dataTable({ "oLanguage": { "sSearch": "Search the nominees:" },
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]]});
});
</script>
上面的代码可以让tblOscarNominees表格成为DataTable,并设置一些属性。
在这个例子里面,你也许会想,这个“oLanguage and sSearch”属性允许我们在指定搜索栏文本,这个“iDisplayLength”属性可以设置默认的显示行数。如果你查看DataTables网站,这个插件有许多可以设置的属性。
好了,最后,我们需要把数据绑定到我们的Repeater上,将Default.aspx.cs的codebehind的class返回给,下面的代码,我们对我们提名名单上增加了“Milk”,我们需要设置数据源并绑定到repeater。
rptOscarNominees.DataSource = nominees;
rptOscarNominees.DataBind();
运行这个网站,会弹出如下所示的页面:
继续,输入搜索的东西,没有传入服务器,排序列表,方便快捷。分页没有自定义代码,几年前,这个插件节省了我大量的时间,我超级喜爱它。
现在,请记住,这是一个非常简单的例子,仅仅是练练手(just to help you get your hands around the technology)。但是要使用这个例子,你可以调整样式表使表格更叫漂亮,并在你的日常开发中使用。我们希望,这个惊奇的插件,让你在你的顾客面前成为英雄。干杯!(
补充:asp.net教程,VB.Net语言 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,