分享在MVC3.0中使用jQuery DataTable 插件
2011-02-18 08:59
344 查看
前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。在项目中我使用jqgrid比较多。但是发现当进行样式调整时jqgrid的样式常常会让美工头疼。而datatable插件却是一个轻量级的jQuery插件。当我通过浏览器查看该js插件rander后的源码。发现只是一个简单的html table,非常简洁。那么在没有特殊要求的情况下使用这个插件,开发人员js脚本的可维护性将得到简化,美工的样式调整也会变得更轻松!下面介绍如何在MVC3.0中使用DataTable jQuery插件。
一、DataTable JS 核心脚本文件、 CSS文件及图片
请到这里下载最新的版本的DataTable插件。该插件内附上了具体的官方DEMO。读者可自行阅读,这里只介绍这个插件的核心文件
1.jquery.dataTables.min.js
压缩后的核心js文件
2.官方提供的CSS文件
demo_page.css 、demo_table.css、 demo_table_jui.css
可以自定义CSS样式来满足客户需求。
3.图片文件
包含一个Images文件夹,请将该文件请全部拷贝到MVC工程的指定目录,截图如下:
生成 html 代码
一、DataTable JS 核心脚本文件、 CSS文件及图片
请到这里下载最新的版本的DataTable插件。该插件内附上了具体的官方DEMO。读者可自行阅读,这里只介绍这个插件的核心文件
1.jquery.dataTables.min.js
压缩后的核心js文件
2.官方提供的CSS文件
demo_page.css 、demo_table.css、 demo_table_jui.css
可以自定义CSS样式来满足客户需求。
3.图片文件
包含一个Images文件夹,请将该文件请全部拷贝到MVC工程的指定目录,截图如下:
生成 html 代码
<table id="myDataTable" class="display"> <thead> <tr> <th style="width: 239px;" class="sorting_disabled"> 标识 </th> <th style="width: 366px;" class="sorting"> 公司名称 </th> <th style="width: 239px;" class="sorting"> 地址 </th> <th style="width: 239px;" class="sorting"> 城市 </th> </tr> </thead> <tbody><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr></tbody></table>
相关文章推荐
- 分享在MVC3.0中使用jQue“.NET研究”ry DataTable 插件
- 分享在MVC3.0中使用jQuery DataTable 插件
- 分享在MVC3.0中使用jQuery DataTable 插件
- 分享在MVC3.0中使用jQuery DataTable 插件(转载)
- 分享在MVC3.0中使用jQuery DataTable 插件
- 一起谈.NET技术,分享在MVC3.0中使用jQuery DataTable 插件
- 分享在MVC3.0中使用jQuery DataTable 插件
- MVC3.0中使用JQuery.DataTable插件。
- 我要学ASP.NET MVC 3.0(十): MVC 3.0 使用 Forms身份验证
- MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹
- 使用JQuery实现的分页插件分享
- 基于twbsPagination.js分页插件使用心得(分享)
- Jquery 上传插件 FineUploader 在 webform 和 mvc 中的使用;
- MVC 3.0 使用筛选器
- 使用python开发vim插件及心得分享
- ionic -- 使用cordova的插件实现分享到QQ、微博、微信
- 基于OSGi.NET开发ASP.NET MVC 3.0插件化应用程序
- 关于SubSonic3.0插件使用Json反序列化获得的实体进行更新操作时,只能执行添加而不能执行修改(编辑)操作的处理
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
- phoneGap在iOS上的简单使用:自定义实现友盟分享插件