ASP.NET使用JQuery DataTables使用说明

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
, 链接
, 代码
属性
,以便于您获取更多的相关知识。

时间: 2024-09-09 18:38:12

ASP.NET使用JQuery DataTables使用说明的相关文章

jQuery DataTables Plugin Meets C#

Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I wanted to scrap my custom table implementation for a table system that would use JSON to return data rather than have the data be statically allocated

asp.net使用jquery模板引擎jtemplates呈现表格

这篇文章主要介绍了asp.net使用jquery模板引擎jtemplates呈现表格的示例,大家参考使用吧 在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的.  代码如下: <%@ Page Language="C#" Inheri

asp.net使用jquery实现搜索框默认提示功能

 这篇文章主要介绍了asp.net使用jquery实现搜索框默认提示功能,大家参考使用吧 文本框中创建默认文本提示   通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索.   当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失.   当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示.   为了实现上面的需求,代码如下:   代码如下: <%@ Page Language="C#" AutoEventWire

ASP.NET配合jQuery解决跨域调用的问题_实用技巧

一. 使用JSONp方式调用 不做详细讲解,可以参考jq文档<jQuery 1.10.3 在线手册> 二. 服务端配置 修改Web.config 文件 <system.webServer> <modules runAllManagedModulesForAllRequests="true"></modules> <httpProtocol> <customHeaders> <add name="Ac

jQuery dataTables与jQuery UI 对话框dialog的使用教程_jquery

首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件. 官方网站及其下载地址:http:/www.datatables.net 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 2.对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript的aler

文件下载-asp.net mvc+jquery 如何将服务器的excel文件导出到客户端下载?

问题描述 asp.net mvc+jquery 如何将服务器的excel文件导出到客户端下载? 问题描述 希望实现的功能是页面点击"导出"button,服务器端即将页面上显示的数据制成excel(已完成该功能)临时存放在服务器,然后将文件下载到客户端. 现在是在服务器生成excel文件后,不知道怎么样将文件传递给客户端. "导出"button的js和controller的action请问该如何实现? 即asp.net mvc+jquery如何实现文件下载 本人新手,

求教jquery datatables 插件如何生成一列序号列?

问题描述 想用jquery datatables 插件生成一列序号列,可是不知道如何做,有知道方法的麻烦请告知. 解决方案 http://www.datatables.net/examples/api/counter_columns.html是这个吗?

jQuery DataTables插件自定义Ajax分页实例解析_jquery

一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现.一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明.二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不了,

jQuery.datatables.js插件用法及api实例详解_jquery

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "