okay,先不管那个将保存我们奥斯卡提名的数据编码对象。现在,我们有更有趣的事情,让我们先在.aspx页面增加一些标签,让这个东西得以运行。首先,在页面的<head>部分添加默认样式表的链接,以及我们的jquery javascript文件链接。如下:
<link rel= href=type= />
<script type= src=></script>
<script type= src=></script>
然后,让我们添加 Repeater,记住,JQuery的DataTables神奇之处在于,他们可以操作任何HTML表额。事实上,他们的网站表明DataTables,“可以给任何HTML表添加高级交互控制”,因此,我们可以将一个表嵌入到我们的Repeater。我猜,大家之前应该都接触(如果你阅读了上一篇文章)过Repeaters和tables,所以我下面的代码,是将表格结构嵌入到Repeater,你可以将下面的代码放到form下,或者指定的 <div>内。
Movie
Lead Actor
Lead Actress
Director
<%
# Eval()
%></td>
<%
# Eval()
%></td>
<%
# Eval()
%></td>
<%
# Eval()
%></td>
正如你所看到的,我们的列名放在了<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=>
$(document).ready(() {
$().dataTable({ : { : },
: 10,
: [[0, ]]});
});
</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)。但是要使用这个例子,你可以调整样式表使表格更叫漂亮,并在你的日常开发中使用。我们希望,这个惊奇的插件,让你在你的顾客面前成为英雄。干杯!(
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 标签
, repeater
, 链接
, 代码
属性
,以便于您获取更多的相关知识。