分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的JQUERY的DATATABLE表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下，推荐该插件的原因。在项目中我使用JQGRID比较多。但是发现当进行样式调整时JQGRID的样式常常会让美工头疼。而DATATABLE插件却是一个轻量级的JQUERY插件。当我通过浏览器查看该JS插件RANDER后的源码。发现只是一个简单的HTML TABLE，非常简洁。那么在没有特殊要求的情况下使用这个插件，开发人员JS脚本的可维护性将得到简化，美工的样式调整也会变得更轻松！下面介绍如何在MVC3.0中使用DATATABLE JQUERY插件。
JS代码
生成 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工程的指定目录，截图如下：
                   
     二、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" />
<SCRIPT TYPE="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>&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 三、 MVC 服务端AJAX相关代码
&NBSP;DATATABLE AJAX响应参数类
PUBLIC CLASS DATATABLEPARAMETER
{
///<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参数实体化
PUBLIC JSONRESULT AJAXHANDLER(DATATABLEPARAMETER PARAM)
{
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);
}&NBSP;&NBSP;&NBSP; 四、程序截图
生成HTML代码如下
生成 HTML 代码 <TABLE ID="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>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17