一聚教程网:一个值得你收藏的教程网站

最新下载

ASP.NET使用JQuery DataTables使用说明

时间:2013-08-14 00:00:00 编辑:简简单单 来源:转载

okay,先不管那个将保存我们奥斯卡提名的数据编码对象。现在,我们有更有趣的事情,让我们先在.aspx页面增加一些标签,让这个东西得以运行。首先,在页面的部分添加默认样式表的链接,以及我们的jquery javascript文件链接。如下:
"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下,或者指定的 内。
<asp:Repeater ID="rptOscarNominees" runat="server">
<HeaderTemplate>
<table id="tblOscarNominees" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th>Movieth>
<th>Lead Actorth>
<th>Lead Actressth>
<th>Directorth>
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>
正如你所看到的,我们的列名放在了标签里,我们的数据绑定元素放在标签里。DataTables库会很好的处理这一段代码。说到DataTables,要在文档的部分添加JQuery代码,事实上,我们已经在前几分钟添加了<script>的链接。(As you can see, our column names are within tags, and our databound elements are within 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 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();
运行这个网站,会弹出如下所示的页面: ASP.NET使用JQuery DataTables使用说明 继续,输入搜索的东西,没有传入服务器,排序列表,方便快捷。分页没有自定义代码,几年前,这个插件节省了我大量的时间,我超级喜爱它。 现在,请记住,这是一个非常简单的例子,仅仅是练练手(just to help you get your hands around the technology)。但是要使用这个例子,你可以调整样式表使表格更叫漂亮,并在你的日常开发中使用。我们希望,这个惊奇的插件,让你在你的顾客面前成为英雄。干杯!(

文章评论