|
前不久在网络上看见一个很不错的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工程的指定目录,截图如下:
二、DataTable 客户端HTML及JS代码
html代码:
<table id="myDataTable" class="display">
<thead>
<tr>
<th>
标识
</th>
<th>
公司名称
</th>
<th>
地址
</th>
<th>
城市
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="btnTest" value="根据条件重新响应后台Ajax" />
NET技术:分享在MVC3.0中使用jQuery DataTable 插件,转载需保留来源!
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。