分享在MVC3.0中使用jQuery DataTable 插件
2011-08-05 16:31
513 查看
前不久在网络上看见一个很不错的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代码
<tableid="myDataTable" class="display">
<thead>
<tr>
<th> 标识</th>
<th> 公司名称</th>
<th> 地址</th>
<th> 城市</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<inputtype="button" id="btnTest"
value="根据条件重新响应后台Ajax"/>
js代码
<script type="text/javascript">
var tbl;
$(function () {
tbl = $('#myDataTable').dataTable({
"bServerSide":true,
"sAjaxSource":"Home/AjaxHandler",//mvc后台ajax调用接口。
'bPaginate':true,//是否分页。
"bProcessing":true,//当datatable获取数据时候是否显示正在处理提示信息。
'bFilter':false,//是否使用内置的过滤功能。
'bLengthChange':true,//是否允许用户自定义每页显示条数。
'sPaginationType':'full_numbers',//分页样式
"aoColumns": [ {
"sName":"ID",
"bSearchable":false,
"bSortable":false,
"fnRender":function (oObj) {return'<a
href=\"Details/'+ oObj.aData[0]+'\">View</a>';
}//自定义列的样式 },
{"sName":"COMPANY_NAME"
},
{"sName":"ADDRESS"
},
{"sName":"TOWN"
} ]
});
//Ajax重新load控件数据。(server端)
$("#btnTest").click(function
() {
var oSettings= tbl.fnSettings();
oSettings.sAjaxSource="Home/AjaxHandler2";
alert(oSettings.sAjaxSource);
tbl.fnClearTable(0);
tbl.fnDraw();
});
});
</script>
三、 MVC 服务端AJAX相关代码
DataTable Ajax响应参数类
接着使用MVC的 ModelBinder将Action参数实体化
四、程序截图
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代码
<tableid="myDataTable" class="display">
<thead>
<tr>
<th> 标识</th>
<th> 公司名称</th>
<th> 地址</th>
<th> 城市</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<inputtype="button" id="btnTest"
value="根据条件重新响应后台Ajax"/>
js代码
<script type="text/javascript">
var tbl;
$(function () {
tbl = $('#myDataTable').dataTable({
"bServerSide":true,
"sAjaxSource":"Home/AjaxHandler",//mvc后台ajax调用接口。
'bPaginate':true,//是否分页。
"bProcessing":true,//当datatable获取数据时候是否显示正在处理提示信息。
'bFilter':false,//是否使用内置的过滤功能。
'bLengthChange':true,//是否允许用户自定义每页显示条数。
'sPaginationType':'full_numbers',//分页样式
"aoColumns": [ {
"sName":"ID",
"bSearchable":false,
"bSortable":false,
"fnRender":function (oObj) {return'<a
href=\"Details/'+ oObj.aData[0]+'\">View</a>';
}//自定义列的样式 },
{"sName":"COMPANY_NAME"
},
{"sName":"ADDRESS"
},
{"sName":"TOWN"
} ]
});
//Ajax重新load控件数据。(server端)
$("#btnTest").click(function
() {
var oSettings= tbl.fnSettings();
oSettings.sAjaxSource="Home/AjaxHandler2";
alert(oSettings.sAjaxSource);
tbl.fnClearTable(0);
tbl.fnDraw();
});
});
</script>
三、 MVC 服务端AJAX相关代码
DataTable Ajax响应参数类
public class DataTableParameter { /// <summary> /// DataTable请求服务器端次数 /// </summary> public string sEcho { get; set; } /// <summary> /// 过滤文本 /// </summary> public string sSearch { get; set; } /// <summary> /// 每页显示的数量 /// </summary> public int iDisplayLength { get; set; } /// <summary> /// 分页时每页跨度数量 /// </summary> public int iDisplayStart { get; set; } /// <summary> /// 列数 /// </summary> public int iColumns { get; set; } /// <summary> /// 排序列的数量 /// </summary> public int iSortingCols { get; set; } /// <summary> /// 逗号分割所有的列 /// </summary> public string sColumns { get; set; } }
接着使用MVC的 ModelBinder将Action参数实体化
public JsonResult AjaxHandler(DataTableParameter param) { return Json(new { sEcho = param.sEcho, iTotalRecords = 50, iTotalDisplayRecords = 50, aaData = new List<object> { new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[] {"1","公司信息","地址信息","城市信息"}, new string[]{"1","公司信息","地址信息","城市信息"} } }, JsonRequestBehavior.AllowGet); }
四、程序截图
相关文章推荐
- 分享在MVC3.0中使用jQue“.NET研究”ry DataTable 插件
- 分享在MVC3.0中使用jQuery 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插件。
- 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)
- 我要学ASP.NET MVC 3.0(十): MVC 3.0 使用 Forms身份验证
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- JAVA开发:分享一些SpringMvc+Ibatis+spring的框架使用心得
- 基于twbsPagination.js分页插件使用心得(分享)
- cordova 实现第三方登录及分享,qq,微信,微博,插件的使用和改动
- 基于OSGi.NET开发ASP.NET MVC 3.0插件化应用程序
- 关于SubSonic3.0插件使用Json反序列化获得的实体进行更新操作时,只能执行添加而不能执行修改(编辑)操作的处理
- jquery datatable插件使用分享
- [转]我要学ASP.NET MVC 3.0(十二): MVC 3.0 使用自定义的Html控件
- bShare分享插件的使用
- asp.net mvc 3.0详细笔记__17__使用 DataAnnotations 进行模型验证