分享在MVC3.0中使用jQuery DataTable 外掛程式

標籤：style   class   blog   code   java   http   

前不久在網路上看見一個很不錯的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代碼如下：

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