datatables 配套bootstrap樣式使用小結（2） ajax篇

距離上一篇有點時間了，周末做了伴郎參加了一個土豪同學的婚禮。

上一篇是介紹一下基本的用法，基本的原理是取出所有的數據，然后調用$.datatables(option)方法格式化，這種方法顯然不太科學，所以ajax方式是必須的。

首先上個效果圖。

 

js和css引用方面依舊沒有變化，詳見上篇。

Html頁面:

@{
    ViewBag.Title = "DataTableServer";
}
@{
    //兩種身份
    List<SelectListItem> discriminatorTypes = new List<SelectListItem>()
    {
        new SelectListItem(){Text="身份類型",Value = ""},
        new SelectListItem(){Text = "學生",Value ="Student"},
        new SelectListItem(){Text="導師",Value="Instructor"}
    };
}

<div class="hidden" id="hidden_filter">
    @* 把需要搜索的條件放到hidden里面，在table格式化完成的時候直接調用$.html()賦值，免去了在js拼接標簽的麻煩 *@
    <div class="row" style="margin-right:0;">
        @Html.DropDownList("disType", discriminatorTypes, new { @class = "form-control input-small", style = "width:120px" })
        @Html.TextBox("name", "", new { @class = "form-control input-small", style = "width:150px", placeholder = "請輸入姓名" })
        <button id="go_search" class="btn btn-default">搜索</button>
    </div>

</div>


<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            Ajax 異步獲取數據
        </div>
    </div>
    <div class="panel-body">
        <table id="table_server" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>入職時間</th>
                    <th>身份</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

頁面定義上table里面只需要定義thead即可。

js：

<script type="text/javascript">
        $(function () {
            var tablePrefix = "#table_server_";
            $("#table_server").dataTable({
              serverSide: true,//分頁，取數據等等的都放到服務端去
                processing: true,//載入數據的時候是否顯示“載入中”
                pageLength: 10,//首次加載的數據條數
                ordering: false,//排序操作在服務端進行，所以可以關了。
                ajax: {//類似jquery的ajax參數，基本都可以用。
                    type: "post",//后台指定了方式，默認get，外加datatable默認構造的參數很長，有可能超過get的最大長度。
                    url: "@Url.Action("GetPeoples")",
                  dataSrc: "data",//默認data，也可以寫其他的，格式化table的時候取里面的數據
                    data: function (d) {//d 是原始的發送給服務器的數據，默認很長。
                        var param = {};//因為服務端排序，可以新建一個參數對象
                        param.start = d.start;//開始的序號
                        param.length = d.length;//要取的數據的
                        var formData = $("#filter_form").serializeArray();//把form里面的數據序列化成數組
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定義需要傳遞的參數。
                    },
                },
                columns: [//對應上面thead里面的序列
                    { data: "id", },//字段名字和返回的json序列的key對應
                    { data: "name", },
                    {
                        //Student 沒有hireDate
                        data: function (e) {
                            if (e.hireDate) {//默認是/Date(794851200000)/格式，需要顯示成年月日方式
                                return new Date(Number(e.hireDate.replace(/\D/g, ''))).toLocaleDateString();
                            }
                            return "空";
                        }
                    },
                    { data: "discriminator", },
                    {
                        data: function (e) {//這里給最后一列返回一個操作列表
                            //e是得到的json數組中的一個item ，可以用於控制標簽的屬性。
                            return '<a class="btn btn-default btn-xs show-detail-json"><i class="icon-edit"></i>顯示詳細</a>';
                        }
                    }
                ],
                initComplete: function (setting, json) {
                    //初始化完成之后替換原先的搜索框。
                    //本來想把form標簽放到hidden_filter 里面，因為事件綁定的緣故，還是拿出來。
                    $(tablePrefix + "filter").html("<form id='filter_form'>" + $("#hidden_filter").html() + "</form>");
                },
                language: {
                  lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>條記錄',//左上角的分頁大小顯示。
                    processing: "載入中",//處理頁面數據的時候的顯示
                    paginate: {//分頁的樣式文本內容。
                        previous: "上一頁",
                     next: "下一頁",
                     first: "第一頁",
                     last: "最后一頁"
                    },

                    zeroRecords: "沒有內容",//table tbody內容為空時，tbody的內容。
                    //下面三者構成了總體的左下角的內容。
                    info: "總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選之后得到 _TOTAL_ 條，初始_MAX_ 條 ",//左下角的信息顯示，大寫的詞為關鍵字。
                    infoEmpty: "0條記錄",//篩選為空時左下角的顯示。
                    infoFiltered: ""//篩選之后的左下角篩選提示(另一個是分頁信息顯示，在上面的info中已經設置，所以可以不顯示)，
                }
            });
            //$("#table_server_filter input[type=search]").css({ width: "auto" });//右上角的默認搜索文本框，不寫這個就超出去了。
        });
        $(document).on("submit", "#filter_form", function () {
            return false;
        });
        $(document).on("click", "#go_search", function () {
            $("#table_server").DataTable().draw();//點搜索重新繪制table。
        });
        $(document).on("click", ".show-detail-json", function () {//取出當前行的數據

            alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));
        });
    </script>

上面主要包含兩個點，一個是自定義右上角的filter對象，要在table初始化完成的回調函數里面加載方法；第二個是調用DataTable API對象的draw方法，實現重新加載。

最后想說的是標簽的綁定事件要放到document或者其他父標簽上，因為元素是在datatable方法加載完成之后才顯示出來的。