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

前不久在网络上看见一个很不错的 JQUERY的DATATABLE表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下，推荐该插件的原因。在项目中我使用J QGRID比较多。但是发现当进行样式调整时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 >