分享在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代碼如下

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