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获取一行的数据
   }
}