分享在MVC3.0中使用jQuery DataTable 插件

前不久在网络上看见一个很不错的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" />
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); }
四、程序截图



生成HTML代码如下
生成 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>