饅頭小舖

在撰寫MVC中常常會使用到很多的JQuery的套件，其中又以Data Table最常使用(結合分頁、查詢與資料顯示的功能)，而最近饅頭常常使用這個套件，但套件也沒有中文名稱，因此饅頭打算在此分享一下使用的方法與說明！

一開始使用前要到http://datatables.net/download/下載DataTables的JavaScript與相關的CSS檔案，並且放入專案中

將JS及CSS檔案放入專案後，我們新增一個Class讓我們接收DataTables的請求參數

public class DataTableParamModel
    {
        /// 

        /// 請求的次數序號
        /// 
       
        public string sEcho { get; set; }

        /// 

        /// 查詢用的資料
        /// 
        public string sSearch { get; set; }

        /// 

        /// 一頁要顯示幾筆資料
        /// 
        public int iDisplayLength { get; set; }

        /// 

        /// 第一筆資料的位置
        /// 
        public int iDisplayStart { get; set; }

        /// 

        /// 在表中的列數
        /// 
        public int iColumns { get; set; }

        /// 

        /// 用哪一個欄位進行排序
        /// 
        public int iSortingCols { get; set; }

        /// 

        /// 欄位的名稱
        /// 
        public string sColumns { get; set; }
    }

以及另外一個Class來放置回傳的資料

public class DataTableResultModel where T :class
    {
        //相關參數
        public String sEcho { get; set; }
        public int iTotalRecords { get; set; }
        public int iTotalDisplayRecords { get; set; }
        //回傳資料
        public IEnumerable aaData { get; set; }
    }

建立好這兩個Class後，我們就可以開始寫畫面該如何呈現了

首先先新增一個API的Controller，並且在Controller新增一個Get的Method

[FromUri] DataTableParamModel Param是用來告訴API說Model的資料是來自Uri

public DataTableResultModel Get([FromUri] DataTableParamModel Param)
{
    DataTableServices Services = new DataTableServices();
    return Services.Read(Param);
}

//Services Code
​public DataTableResultModel Read(DataTableParamModel InputData)
{
    DataTableResultModel OutputData = new DataTableResultModel();
    Expression> Filter = x => x.Display == false;
    
    ///查詢的邏輯

    OutputData.iTotalDisplayRecords = //計算共顯示幾筆資料
    OutputData.iTotalRecords = OutputData.iTotalRecords =
        (int)Math.Ceiling((Double)OutputData.iTotalDisplayRecords / (Double)InputData.iDisplayLength);//總共有幾頁
    OutputData.sEcho = HttpContext.Current.Request.QueryString["sEcho"];
    return OutputData;
}/itemdisplaymodel>

接下來建立View準備一個Table的html tag像似

<table class="table table-striped table-bordered table-hover" id="DataTables">
    <thead>
       <tr role="row">
            <th data-name="ItemId" style="width: 5%;">#</th>
            <th data-name="Name" style="width: 25%;">商品名稱</th>
            <th data-name="Price" style="width: 10%;">商品價格</th>
             <th data-name="Display" style="width: 10%;">商品狀態</th>
             <th data-name="Image" style="width: 20%;">商品圖片</th>
             <th data-name="Message" style="width: 30%;">商品描述</th>
        </tr>
    </thead>
   <tbody></tbody>
</table>

$(function () {
    var oTable = $('#DataTables').dataTable({
        "aaSorting": [[0, 'asc']],//初始排序欄位
        "bFilter": true,//是否有搜尋資料的input
        "bAutoWidth": false,//是否要自動欄寬
        "bScrollCollapse": false,
        "bPaginate": true,
        "bLengthChange": true,
        "bDeferRender": true,
        "bServerSide": true,//資料是否來自伺服器
        "bProcessing": true,//顯示處理中的圖樣
        "sDom": "<'row'<'col-sm-offset-8 col-sm-3'f><'col-sm-1' l>t>" + "r" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",//設定搜尋與資料長度
        "sEcho": 1,//起始Echo
        "sAjaxSource":,//若資料來自伺服器，在此填寫URL
        "iDisplayLength": 10,//出史資料大小
        "aoColumns": [//(重要)欄位對應，可以讓伺服器回傳的資料可以在頁面上對應
            { "mData": "Id" },
            { "mData": "Name" },
            { "mData": "Price" },
            { "mData": "Display" },
            { "mData": "Image" },
            { "mData": "Message" }
        ],//設定語言
        "oLanguage": {
            "sLengthMenu": " _MENU_ 筆/頁",
            "sZeroRecords": "找不到符合的資料。",
            "sInfo": "共 _MAX_ 頁",
            "sSearch": "搜尋",
            "sInfoFiltered": " - 找到 _TOTAL_ 筆 資料",
            "sInfoEmpty": "共 0 頁",
            "oPaginate": {
                "sPrevious": "«",
                "sNext": "»"
            }
        }
    });
});

大家好我是饅頭，希望大家喜歡我的文章

如果有錯誤的地方請不吝指教 ^_^