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"

        }

    });

});

修改好之後就存檔並重新整理瀏覽器的頁面，就可以看到不只是分頁列的顯示文字，其餘功能的顯示文字都是正體中文了，

 

如果每建立一個 List 頁面就要去修改頁面中的 dataTables 設定的話就太累人了，所以一勞永逸的做法就是直接修改 List 的 Code Template 內容，這樣一來後續所建立的 List 頁面就不需要去手動增加顯示文字檔的指定了。

 

開啟 Code Template - List.tt，移到 Line 133 的地方，

我們把剛才所增加的顯示文字語言檔的指令給加進去，

現在我們新增一個 List 頁面，建立的步驟在前面已經說明過了，這邊就不再重複說明，

CustomerList.cshtml，這邊的顯示文字語言檔的指定是由 Code Template 建立的，

顯示結果，

 

---

jQuery Plugin - DataTables 是個相當不錯的前端套件，提供以及支援的功能也相當多，ASP.NET MVC 所開發的網站專案中，在前端的資料列表顯示可以將 DataTables 列入選項之一。

 

以上