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

分享在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;
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 '&LT;A HREF=\"DETAILS/' + OOBJ.ADATA[0] + '\"&GT;VIEW&LT;/A&GT;';
                            }                           //自定义列的样式
                        },
                        { "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();

            });
        });
&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;       
        PUBLIC STRING SECHO { GET; SET; }

/// &LT;SUMMARY&GT;
/// 过滤文本
/// &LT;/SUMMARY&GT;
        PUBLIC STRING SSEARCH { GET; SET; }

/// &LT;SUMMARY&GT;
/// 每页显示的数量
/// &LT;/SUMMARY&GT;
        PUBLIC INT IDISPLAYLENGTH { GET; SET; }

/// &LT;SUMMARY&GT;
/// 分页时每页跨度数量
/// &LT;/SUMMARY&GT;
        PUBLIC INT IDISPLAYSTART { GET; SET; }

/// &LT;SUMMARY&GT;
/// 列数
/// &LT;/SUMMARY&GT;
        PUBLIC INT ICOLUMNS { GET; SET; }

/// &LT;SUMMARY&GT;
/// 排序列的数量
/// &LT;/SUMMARY&GT;
        PUBLIC INT ISORTINGCOLS { GET; SET; }

/// &LT;SUMMARY&GT;
/// 逗号分割所有的列
/// &LT;/SUMMARY&GT;
        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&LT;OBJECT&GT; {
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);


        }

&NBSP;&NBSP;&NBSP; 四、程序截图

生成HTML代码如下

生成 HTML 代码


&LT;TABLE ID="MYDATATABLE" CLASS="DISPLAY"&GT;
&LT;THEAD&GT;
&LT;TR&GT;
&LT;TH STYLE="WIDTH: 239PX;" CLASS="SORTING_DISABLED"&GT;
                标识
&LT;/TH&GT;
&LT;TH STYLE="WIDTH: 366PX;" CLASS="SORTING"&GT;
                公司名称
&LT;/TH&GT;
&LT;TH STYLE="WIDTH: 239PX;" CLASS="SORTING"&GT;

                地址
&LT;/TH&GT;
&LT;TH STYLE="WIDTH: 239PX;" CLASS="SORTING"&GT;
                城市
&LT;/TH&GT;
&LT;/TR&GT;
&LT;/THEAD&GT;

&LT;TBODY&GT;&LT;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="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 插件

相关推荐