mrkt 的程式學習筆記: MVC Themed App - 修改 jQuery Plugin「DataTables」顯示文字為正體中文

事情是這樣的，昨天有位朋友在「ASP.NET MVC 3 使用新的專案樣板–MVC Themed App」這篇文章提出問題，一開始給我的訊息是說修改 MVC Themed App 內建 T4 Templates 內容後會出現錯誤，原本想要顯示中文的地方卻是顯示為亂碼，以致於一開始我的回答是以解決 T4 Template 亂碼的方向，

但後來這位朋友給了一個比較明確的線索，

我想有使用過 jQuery.DataTables.js 的朋友應該知道要怎麼解決，不過我在這邊記錄怎麼解決置換中文顯示的方法。

DataTables

http://datatables.net/

先來稍微認識一下這個 DataTables 套件，是一個使用 jQuery library 前端外掛套件，提供一個簡單的設定方式就可以讓原來的 Table 有很多增強功能，而且重點是 …… 這個 Plugin 是免費的。

如果對這個 Plugin 有興趣或是想要知道它有什麼樣的功能，建議可以參考網站中的範例演示，

http://datatables.net/examples/

回到 MVC Themed App 這套 Project Template 上，相關的介紹可以參考「ASP.NET MVC 3 使用新的專案樣板–MVC Themed App」這篇文章，我這邊使用 MVC Themed App 的 Project Template 建立了一個 ASP.NET MVC 專案（這個 Project Template 只有支援 ASP.NET MVC 3），如下：

我這裡並沒有做什麼樣的修改，只有先加入資料庫使用「Northwind」的 ADO.NET 實體資料模型，

網站執行首頁

接著我們使用 MVC Themed App 的內建 T4 Template 來建立一個 List 頁面，

HomeController / ProductList

加入檢視

勾選「建立強型別檢視」並且在「模型類別」的下拉選單中選擇「Products (MVCThemedApp1.Models)」

接著選擇「Scaffold 樣板」中的「List」，

最後選擇「主版頁面」然後點選「加入」以完成整個加入檢視的步驟，

Views/ Home / ProductList.cshtml

@model IEnumerable<MVCThemedApp1.Models.Products> @{    ViewBag.Title = "ProductList";    Layout = "~/Views/Shared/_Layout.cshtml";}    <script src="@Url.Content("~/Scripts/jquery.dataTables.js")" type="text/javascript"></script>    列表：    <div id="block-tables" class="block">        <div class="content">            <div class="inner">    <table id="datalist" class="table">    <thead>        <tr>            <th></th>            <th>                ProductName            </th>            <th>                SupplierID            </th>            <th>                CategoryID            </th>            <th>                QuantityPerUnit            </th>            <th>                UnitPrice            </th>            <th>                UnitsInStock            </th>            <th>                UnitsOnOrder            </th>            <th>                ReorderLevel            </th>            <th>                Discontinued            </th>        </tr>    </thead>    <tbody>    @foreach (var item in Model) {        <tr>            <td>                @Html.ActionLink("Edit", "Edit", new { id=item.ProductID }) |                @Html.ActionLink("Details", "Details", new { id=item.ProductID }) |                @Html.ActionLink("Delete", "Delete", new { id=item.ProductID })            </td>            <td>                @item.ProductName            </td>            <td>                @item.SupplierID            </td>            <td>                @item.CategoryID            </td>            <td>                @item.QuantityPerUnit            </td>            <td>                @String.Format("{0:F}", item.UnitPrice)            </td>            <td>                @item.UnitsInStock            </td>            <td>                @item.UnitsOnOrder            </td>            <td>                @item.ReorderLevel            </td>            <td>                @item.Discontinued            </td>        </tr>    }    </tbody>    </table>            </div>        </div>    </div>    <script type="text/javascript">        $(document).ready(function () {            $('#datalist').dataTable({                "sPaginationType": "full_numbers"            });        });    </script>    

重新建置專案，瀏覽 ProductList 的顯示結果，

這個 List Scaffold 的 T4 Template 是在專案的「CodeTemplates / AddView / CSHTML / List.tt」，

基本上這個 List.tt 主要是負責去產出 Table 內容，並且在這個 Templates 中去設定 dataTable 的內容，

jQuery.DataTables.js

一開始就有說過 MVC Themed App 預設使用 DataTables 套件來置換一般 Table 的樣式並添加 Table 的功能，但是 DataTables 預設的顯示文字為英文，在 jQuery.dataTables.js 中是預先設定好的，設定的內容就在程式的 Line 967 ~ 987，

這邊的預設顯示文字內容可不要直接動手去改它，要是直接去修改的話，最後在頁面上的顯示就會出現亂碼，

例如我把分頁列的顯示文字直接修改為以下的內容，

執行後的列表頁面，在分頁列的顯示文字就會變成亂碼而不是我們所修改的文字，

難道就無法去修改顯示的文字內容嗎？

其實是可以的，只不過不可以直接去修改 jquery.datatales.js 的內容，有關如何修改的方法在 DataTables 的網站上都有詳細的說明，

「DataTables > Plug-ins > Internationalisation 」

http://datatables.net/plug-ins/i18n

在「Internationalisation 」的頁面裡有提供了多種的語言，可以有多種語言的文字顯示，當然其中有包含「正體中文 Chinese (traditional)」，

{    "sProcessing":   "處理中...",    "sLengthMenu":   "顯示 _MENU_ 項結果",    "sZeroRecords":  "沒有匹配結果",    "sInfo":         "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",    "sInfoEmpty":    "顯示第 0 至 0 項結果，共 0 項",    "sInfoFiltered": "(從 _MAX_ 項結果過濾)",    "sInfoPostFix":  "",    "sSearch":       "搜索:",    "sUrl":          "",    "oPaginate": {        "sFirst":    "首頁",        "sPrevious": "上頁",        "sNext":     "下頁",        "sLast":     "尾頁"    }}

我們把上面的語言文字顯示內容複製並另存為「dataTables.Chinese.traditional.txt」

接著回到 ProductList.cshtml 檔案（記得先把之前曾經對 jquery.datatables.js 修改的地方給恢復原狀），將頁面中設定 dataTables 的地方增加顯示語言文字檔的指定，

$(document).ready(function () {    $('#datalist').dataTable({        "sPaginationType": "full_numbers",        "oLanguage": {            "sUrl": "/Scripts/dataTables.Chinese.traditional.txt"        }    });});