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

前不久在网络上看见一个很不错的JQUERY的DATATABLE表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下，推荐该插件的原因。在项目中我使用JQGRID比较多。但是发现当进行样式调整时JQGRID的样式常常会让美工头疼。而DATATABLE插件却是一个轻量级的JQUERY插件。当我通过浏览器查看该JS插件RANDER后的源码。发现只是一个简单的HTML TABLE，非常简洁。那么在没有特殊要求的情况下使用这个插件，开发人员JS脚本的可维护性将得到简化，美工的样式调整也会变得更轻松！下面介绍如何在MVC3.0中使用DATATABLE JQUERY插件。

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 一、DATATABLE JS 核心脚本文件、 CSS文件及图片

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 请到这里下载最新的版本的DATATABLE插件。该插件内附上了具体的官方DEMO。读者可自行阅读，这里只介绍这个插件的核心文件

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 1.JQUERY.DATATABLES.MIN.JS

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 压缩后的核心JS文件

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 2.官方提供的CSS文件

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; DEMO_PAGE.CSS 、DEMO_TABLE.CSS、 DEMO_TABLE_JUI.CSS

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 可以自定义CSS样式来满足客户需求。

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 3.图片文件

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 包含一个IMAGES文件夹，请将该文件请全部拷贝到MVC工程的指定目录，截图如下：

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

&NBSP;&NBSP;&NBSP;&NBSP; 二、DATATABLE 客户端HTML及JS代码

HTML代码

&LT;TABLE ID="MYDATATABLE" CLASS="DISPLAY"&GT;

&LT;THEAD&GT;


&LT;TR&GT;


&LT;TH&GT;


标识


&LT;/TH&GT;


&LT;TH&GT;


公司名称


&LT;/TH&GT;


&LT;TH&GT;


地址


&LT;/TH&GT;


&LT;TH&GT;


城市


&LT;/TH&GT;


&LT;/TR&GT;


&LT;/THEAD&GT;


&LT;TBODY&GT;


&LT;/TBODY&GT;


&LT;/TABLE&GT;

&LT;INPUT TYPE="BUTTON" ID="BTNTEST" VALUE="根据条件重新响应后台AJAX" /&GT;

JS代码

&LT;SCRIPT TYPE="TEXT/JAVASCRIPT"&GT;

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'&LT;AHREF=\"DETAILS/'+OOBJ.ADATA[0]+'\"&GT;VIEW&LT;/A&GT;';


}//自定义列的样式


},


{"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();



});


});

&LT;/SCRIPT&GT;

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 三、 MVC 服务端AJAX相关代码

&NBSP;DATATABLE AJAX响应参数类

PUBLIC CLASS DATATABLEPARAMETER

{


///&LT;SUMMARY&GT;


///DATATABLE请求服务器端次数


///&LT;/SUMMARY&GT;


PUBLICSTRINGSECHO{GET;SET;}



///&LT;SUMMARY&GT;


///过滤文本


///&LT;/SUMMARY&GT;


PUBLICSTRINGSSEARCH{GET;SET;}



///&LT;SUMMARY&GT;


///每页显示的数量


///&LT;/SUMMARY&GT;


PUBLICINTIDISPLAYLENGTH{GET;SET;}



///&LT;SUMMARY&GT;


///分页时每页跨度数量


///&LT;/SUMMARY&GT;


PUBLICINTIDISPLAYSTART{GET;SET;}



///&LT;SUMMARY&GT;


///列数


///&LT;/SUMMARY&GT;


PUBLICINTICOLUMNS{GET;SET;}



///&LT;SUMMARY&GT;


///排序列的数量


///&LT;/SUMMARY&GT;


PUBLICINTISORTINGCOLS{GET;SET;}



///&LT;SUMMARY&GT;


///逗号分割所有的列


///&LT;/SUMMARY&GT;


PUBLICSTRINGSCOLUMNS{GET;SET;}

    }

接着使用MVC的 MODELBINDER将ACTION参数实体化

PUBLIC JSONRESULT AJAXHANDLER(DATATABLEPARAMETER PARAM)

{


RETURNJSON(NEW


{


SECHO=PARAM.SECHO,


ITOTALRECORDS=50,


ITOTALDISPLAYRECORDS=50,


AADATA=NEWLIST&LT;OBJECT&GT;{


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 代码

&LT;TABLE ID="MYDATATABLE" CLASS="DISPLAY"&GT;

&LT;THEAD&GT;


&LT;TR&GT;


&LT;THSTYLE="WIDTH:239PX;"CLASS="SORTING_DISABLED"&GT;


标识


&LT;/TH&GT;


&LT;THSTYLE="WIDTH:366PX;"CLASS="SORTING"&GT;


公司名称


&LT;/TH&GT;


&LT;THSTYLE="WIDTH:239PX;"CLASS="SORTING"&GT;



地址


&LT;/TH&GT;


&LT;THSTYLE="WIDTH:239PX;"CLASS="SORTING"&GT;


城市


&LT;/TH&GT;


&LT;/TR&GT;


&LT;/THEAD&GT;



&LT;TBODY&GT;&LT;TRCLASS="ODD"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="EVEN"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="ODD"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="EVEN"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="ODD"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="EVEN"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="ODD"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="EVEN"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="ODD"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TRCLASS="EVEN"&GT;&LT;TDCLASS="SORTING_1"&GT;&LT;AHREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;/TBODY&GT;&LT;/TABLE&GT;

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

相关推荐