datatables 配套bootstrap3樣式使用小結（1）

今天介紹彙總一下datatables。

網址： www.datatables.net

公司CMS內容資訊站的後臺管理界面用了大量的table來管理數據，試用了以後，感受挺不錯，推薦一下。

先上一個基本的效果圖.

（圖片太寬了，換了另外一個模板）

介紹一下這個demo的實現。

首先是引用 js+css。

js有4個，①jquery，②bootstrap3，③datatables的js，④datatables對應bootstrap樣式時用的。

爲了說明問題，就不放bundle裏面了。

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Content/datatables/js/jquery.dataTables.js"></script>
<script src="~/Content/datatables/js/dataTables.bootstrap.js"></script>

 

 

而後是css。

有2個，①bootstrap3，②datatables對應bootstrap樣式（要用這個替換datatables默認的樣式，不然會出現右下角的分頁樣式margin很大的狀況。）

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />

 

下面是html

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            基本的datatables
        </div>
    </div>
    <div class="panel-body">
        <table id="table_local" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EnrollmentDate</th>
                    <th>Discriminator</th>
                </tr>
            </thead>
            @if(Model.Count() > 0) {
                <tbody>
                    @foreach(var p in Model) {
                        <tr>
                            <td>@p.PersonID</td>
                            <td>@p.FirstName</td>
                            <td>@p.LastName</td>
                            <td>@p.EnrollmentDate.GetValueOrDefault().ToString("yyyy-MM-dd HH:mm:ss")</td>
                            <td>@p.Discriminator</td>
                        </tr>
                    }
                </tbody>
            }
        </table>
    </div>
</div>

而後是js

<script type="text/javascript">
        $(function () {
            $("#table_local").dataTable({
                //lengthMenu: [5, 10, 20, 30],//這裏也能夠設置分頁，可是不能設置具體內容，只能是一維或二維數組的方式，因此推薦下面language裏面的寫法。
                paging: true,//分頁
                ordering: true,//是否啓用排序
                searching: true,//搜索
                language: {
                    lengthMenu: '<select class="form-control input-xsmall">' + '<option value="1">1</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>條記錄',//左上角的分頁大小顯示。
                    search: '<span class="label label-success">搜索：</span>',//右上角的搜索文本，能夠寫html標籤

                    paginate: {//分頁的樣式內容。
                        previous: "上一頁",
                        next: "下一頁",
                        first: "第一頁",
                        last: "最後"
                    },

                    zeroRecords: "沒有內容",//table tbody內容爲空時，tbody的內容。
                    //下面三者構成了整體的左下角的內容。
                    info: "總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選以後獲得 _TOTAL_ 條，初始_MAX_ 條 ",//左下角的信息顯示，大寫的詞爲關鍵字。
                    infoEmpty: "0條記錄",//篩選爲空時左下角的顯示。
                    infoFiltered: ""//篩選以後的左下角篩選提示，
                },
                paging: true,
                pagingType: "full_numbers",//分頁樣式的類型

            });
            $("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默認搜索文本框，不寫這個就超出去了。
        });

    </script>

執行js以後，若是沒有報錯，那就會獲得最上面的效果圖。四個編號上的內容都是能夠經過傳入datatable()方法控制的。其中要注意，方法名是dataTable而不是DataTable，後者用於api的操做。

經過瀏覽器的開發者工具能夠看到，四個控制塊的id分別爲table的id 加上 length，filter，info，paginate，因此若有須要，能夠直接用js來強制控制。

編號②中的搜索框是輸入內容後自動搜索表格上的全部列（固然能夠經過他的api來實現搜索特定的列，好比某些隱藏列的篩選）。

圖以下：

經過以上4個控制，基本能夠知足大部分table列表的需求。

這樣的table屬於一次性加載完全部數據，而後再調用js格式化。

晚上再寫用ajax異步加載數據datatable。