datatable基本使用

  基本使用

var t = ("#asset_list").DataTable({
                paging: true,//分頁
                pagingType: "full_numbers", //定義翻頁組件的樣式
                scrollX: "",    //寬度沒有滾動條
                stateSave: false, //狀態保存
                autoWidth: false, //自控制寬度
        // {#            serverSide: true,//分頁，取數據等等的都放到服務端去#}
                processing: true, //載入數據的時候是否顯示 載入中
                searching: true, //搜索
                pageLength: 10, //首次加載的數據條數

                ordering: false,    //排序操作在

                "aaSorting": [[4, 'desc']],

                ajax: {     //類似jquery的ajax參數，基本都可以用。
                    type: "post",   //后台指定了方式，默認get，外加datatable默認構造的參數很長，有可能超過get的最大長度。
                    url: "/asset/get_asset_list/",
                    dataSrc: "data",    //默認data，也可以寫其他的，格式化table的時候取里面的數據
                },
                columns: [//對應上面thead里面的序列
                    { "data": null},
                    { "data": null},
                    { "data": "asset_id"},
                    { "data": "sn" },
                    { "data": "serial_name" },
                    { "data": "asset_type" },
                    { "data": "ip" },
                    { "data": "idc_name" },
                    { "data": "idc_jg" },
                    { "data": "projectname" },
                    { "data": "application" },
                    { "data": "module" },
                    { "data": "status" },
                    { "data": "linkman" },
                    { "data": "memo" },
                    { "data": "admin" },
                    { "data": "details" }
                ],

                "columnDefs": [
                    {
                        "targets": [ 3,9,12,14,15 ],
                        "visible": false    //隱藏列
                    },
                    {
                        targets: 2,
                        className: 'display_n'
                    },
                    {
                        targets: 1,
                        "render": function ( data, type, row, meta ) {
                            //<input type="checkbox">
                            return '<input type="checkbox" >';
                        }
                    },
                    {
                        targets: -1 ,//targets last column, use 0 for first column
                        className: 'pointer',
                        "data": "download_link",
                        "render": function ( data, type, row, meta ) {
                        //return '<a class="btn-link" href="'+row.id+'" target="_blank">'+ data +'</a>';
                         return '<a class="btn-link" href="'+row.asset_id+'">'+ data +'</a>';
                        }

                    },
                    {
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    }
                ],
                "order": [[1, 'asc']],

                language: {
                     lengthMenu: '顯示條數：<select class="form-control">' + '<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>',//左上角的分頁大小顯示。
                     search: '<span class="">搜索：</span>', //右上角的搜索文本，可以寫html標簽
                     processing: "載入中", //處理頁面數據的時候的顯示
                     paginate: { //分頁的樣式文本內容。
                         previous: "上一頁",
                         next: "下一頁",
                         first: "首頁",
                         last: "尾頁"
                    },
                    zeroRecords: "沒有這條記錄",//table tbody內容為空時，tbody的內容。
                    //下面三者構成了總體的左下角的內容。
                    info: "第_PAGE_/_PAGES_ 頁，共 _TOTAL_ 條數據",//顯示第_START_ 到第 _END_ 左下角的信息顯示，大寫的詞為關鍵字。
                    infoEmpty: "0條記錄",//篩選為空時左下角的顯示。
                    infoFiltered: "篩選之后得到 _TOTAL_ 條，初始_MAX_ 條"//篩選之后的左下角篩選提示(另一個是分頁信息顯示，在上面的info中已經設置，所以可以不顯示)，
                },

                "initComplete":function () {    //表格加載完成之后執行

                    $("tbody").find("a").click(function () {
                        event.stopPropagation();
                    });
                    //end
                }
            });

 

 

添加索引

$(document).ready(function() {
    var t = $('#example').DataTable({
        "columnDefs": [{
            "searchable": false,
            "orderable": false,
            "targets": 0
        }],
        "order": [[1, 'asc']]
    });
    t.on('order.dt search.dt',
    function() {
        t.column(0, {
            search: 'applied',
            order: 'applied'
        }).nodes().each(function(cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
});

 

獲取數據

//獲取表格所有數據
var dt = $("#table1").dataTable();
var nTrs  = dt.fnGetNodes();    //fnGetNodes獲取表格所有行，nTrs[i]表示第i行tr對象
for(var i = 0; i < nTrs.length; i++){
    var choice_data = dt.fnGetData(nTrs[i]);
    console.log(choice_data);  //fnGetData獲取一行的數據
    console.log(choice_data.("name"));    //獲取某一行某一列數據
}

//獲取表格選中行數據
var dt = $("#table1").dataTable();
var nTrs = dt.fnGetNodes();     //fnGetNodes獲取表格所有行，nTrs[i]表示第i行tr對象
for(var i = 0; i < nTrs.length; i++){
   if($(nTrs[i]).find("input:checkbox").prop("checked") == true){   //找出被選中的那行
       var choice_data = dt.fnGetData(nTrs[i]);
       console.log(choice_data);    //fnGetData獲取一行的數據
   }
}