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

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