Datatables.js選項之DOM:定義表格控制元件在頁面的顯示順序以及language語言選項

每個控制元件元素在資料表都有一個關聯的單個字母。
l — 每頁顯示行數的控制元件（顯示選擇每頁顯示條數的下拉框）
f — 檢索條件的控制元件（搜尋框的關聯字母）
t — 表格控制元件（顯示錶格的關聯字母）
i — 表資訊總結的控制元件（比如顯示 - 第 1 頁 / 總 5 頁和過濾總件數 _MAX_ 條等總結資訊）
p — 分頁控制元件（顯示上一頁12345…下一頁的關聯字母）
r — 處理中的控制元件（顯示處理中…載入中…等）

還可以在控制元件元素外新增DIV和Class，語法如下
<and> — DIV元素
<"class" and> — DIV和Class
<"#id" and> — DIV和ID

如：

"dom": 'lfrtip',//這些功能預設的位置是這樣的每個字母的先後代表每個功能輸出在頁面上的先後

"dom": 'lrtip'  頁面少了f  --- 檢索條件的控制元件（搜尋框）

例子：

var data1 = [{
    "name": "aaTiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
}, {
    "name": "aaGarrett Winters",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
}, 
];

$(document).ready(function () {
    $('#table_id').DataTable({
        //"dom": '<"bbb"lfrtip>',//這些功能預設的位置是這樣的
        dom: 'B<"toolbar">frtip',
        
        "buttons": [{
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        }],
        
        data: data1,
        columns: [{
                data: 'name'
            }, {
                data: 'position'
            }, /*注意這裡的資料要和table<th>要一一對應*/ {
                data: 'salary'
            }, {
                data: 'office'
            }, {
                data: 'extn'
            }
        ],
        'language': {
            "emptyTable": "沒有資料",
            "info": "從 _TOTAL_ 資料中顯示 _START_ 到 _END_ 條資料",
            "infoEmpty": "從0條記錄中顯示0到0條記錄",
            "infoFiltered": "(查詢篩選時總共過濾 _MAX_ 條)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "每頁顯示 _MENU_ 記錄(資料)",
            "loadingRecords": "載入中...",
            "processing": "查詢中...",
            "search": "查詢篩選:",
            "zeroRecords": "沒有資料",
            "paginate": {
                "first": "首頁",
                "last": "尾頁",
                "next": "下一頁",
                "previous": "上一頁"
            },
            "aria": {
                "sortAscending": ": 啟用列升序排序",
                "sortDescending": ": 啟用列降序排序"
            },
            'info': '第 _PAGE_ 頁 / 總 _PAGES_ 頁', //加上這條 language裡的info會被覆蓋將不再顯示
            'infoEmpty': '沒有資料', //加上這條 language裡的emptyTable會被覆蓋將不再顯示
            'infoFiltered': '(過濾總件數 _MAX_ 條)' //加上這條 language裡的infoFiltered會被覆蓋將不再顯示
        }
        //paging:false,//分頁
        //scrolly:400,//滾動條
        //分頁和滾動條是連用的因為如果分頁預設是開著的那麼滾動條是無效的貌似只將分頁關掉也會有滾動條出現
    });
    $("div.toolbar").html('<b style="color:red">自定義文字圖片等。。。</>');
});