分享在MVC3.0中使用jQuery DataTable 插件
XiaoSpring 2011-02-24
前不久在网络上看见一个很不错的JQUERY的DATATABLE表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下，推荐该插件的原因。在项目中我使用JQGRID比较多。但是发现当进行样式调整时JQGRID的样式常常会让美工头疼。而DATATABLE插件却是一个轻量级的JQUERY插件。当我通过浏览器查看该JS插件RANDER后的源码。发现只是一个简单的HTMLTABLE，非常简洁。那么在没有特殊要求的情况下使用这个插件，开发人员JS脚本的可维护性将得到简化，美工的样式调整也会变得更轻松！下面介绍如何在MVC3.0中使用DATATABLEJQUERY插件。
一、DATATABLEJS核心脚本文件、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代码
<SCRIPTTYPE="TEXT/JAVASCRIPT">VARTBL;$(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'<AHREF=\"DETAILS/'+OOBJ.ADATA[0]+'\">VIEW</A>';}//自定义列的样式},{"SNAME":"COMPANY_NAME"},{"SNAME":"ADDRESS"},{"SNAME":"TOWN"}]});//AJAX重新LOAD控件数据。（SERVER端）$("#BTNTEST").CLICK(FUNCTION(){VAROSETTINGS=TBL.FNSETTINGS();OSETTINGS.SAJAXSOURCE="HOME/AJAXHANDLER2";ALERT(OSETTINGS.SAJAXSOURCE);TBL.FNCLEARTABLE(0);TBL.FNDRAW();});});</SCRIPT>
三、MVC服务端AJAX相关代码
DATATABLEAJAX响应参数类
PUBLICCLASSDATATABLEPARAMETER{///<SUMMARY>///DATATABLE请求服务器端次数///</SUMMARY>PUBLICSTRINGSECHO{GET;SET;}///<SUMMARY>///过滤文本///</SUMMARY>PUBLICSTRINGSSEARCH{GET;SET;}///<SUMMARY>///每页显示的数量///</SUMMARY>PUBLICINTIDISPLAYLENGTH{GET;SET;}///<SUMMARY>///分页时每页跨度数量///</SUMMARY>PUBLICINTIDISPLAYSTART{GET;SET;}///<SUMMARY>///列数///</SUMMARY>PUBLICINTICOLUMNS{GET;SET;}///<SUMMARY>///排序列的数量///</SUMMARY>PUBLICINTISORTINGCOLS{GET;SET;}///<SUMMARY>///逗号分割所有的列///</SUMMARY>PUBLICSTRINGSCOLUMNS{GET;SET;}}
接着使用MVC的MODELBINDER将ACTION参数实体化
PUBLICJSONRESULTAJAXHANDLER(DATATABLEPARAMETERPARAM){RETURNJSON(NEW{SECHO=PARAM.SECHO,ITOTALRECORDS=50,ITOTALDISPLAYRECORDS=50,AADATA=NEWLIST<OBJECT>{NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"},NEWSTRING[]{"1","公司信息","地址信息","城市信息"}}},JSONREQUESTBEHAVIOR.ALLOWGET);}
四、程序截图
生成HTML代码如下
生成HTML代码
<TABLEid="MYDATATABLE"class="DISPLAY"><THEAD><TR><THstyle="WIDTH:239PX;"class="SORTING_DISABLED">标识</TH><THstyle="WIDTH:366PX;"class="SORTING">公司名称</TH><THstyle="WIDTH:239PX;"class="SORTING">地址</TH><THstyle="WIDTH:239PX;"class="SORTING">城市</TH></TR></THEAD><TBODY><TRclass="ODD"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="EVEN"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="ODD"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="EVEN"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="ODD"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="EVEN"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="ODD"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="EVEN"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="ODD"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR><TRclass="EVEN"><TDclass="SORTING_1"><Ahref="DETAILS/1">VIEW</A></TD><TD>公司信息</TD><TD>地址信息</TD><TD>城市信息</TD></TR></TBODY></TABLE>
