前端常用功能记录(三)—datatables表格初始化（转）

数据源

我经常使用的有两种，一种是JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。

（字段的命名可以使用类型加字段名称也可以直接使用如aaData，也可以是data，aoColumns，也可以是columns)

如：

$(document).ready(function() {

    $('#demo').html( '<table class="table b-t b-light"  id="datatables"> </table>' );

    $('#example').dataTable( {

        data: [

            [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],

            [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],

            [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],

            [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],

            [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],

            [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],

            [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],

            [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],

            [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]

        ],

        columns: [

            { "sTitle": "Engine" },

            { "sTitle": "Browser" },

            { "sTitle": "Platform" },

            { "sTitle": "Version", "sClass": "center" },

            {

                "sTitle": "Grade",

                "sClass": "center",

                "fnRender": function(obj) {

                    var sReturn = obj.aData[ obj.iDataColumn ];

                    if ( sReturn == "A" ) {

                        sReturn = "<b>A</b>";

                    }

                    return sReturn;

                }

            }

        ],

        paging: false,

        order:[

                [1, "asc"]

        ],

        dom: 'lrtp',

        columnDefs: [

            {width: '30%', targets: 0},

        ],

    } );

} );

aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。

对于每一个列对象：

sTitle 定义列的标题

sClass 定义列的样式

fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。

如果data是从后台传过来的二维数组，则data可以赋值如下：

data: <%- JSON.stringify(aaData) %>, // aaData是后台传过来的

第二种方式是从HTML表（而不是一个Ajax或JavaScript数据源）读取数据表的内容，默认情况下它会读取表中的信息转换为内部数据表的数组。每个阵列元素表示一列。

传入的数据格式如下（如从数据库中读取返回的数据格式）：

[{

    "name":    "...",

    "position":   "...",

    "office":    "...",

    "age":      "...",

    "start_date": "...",

    "salary":    "..."},

{

    "name":    "...",

    "position":   "...",

    "office":    "...",

    "age":      "...",

    "start_date": "...",

    "salary":    "..."},

]

表格初始化的格式如下：

$(document).ready(function() {

    $('#example').DataTable({

        "columns": [

            { "data": "name", },

            { "data": "position" ,},

            { "data": "office", },

            { "data": "age", },

            { "data": "start_date", },

            { "data": "salary" ,"visible": false,}

        ],

        "order": [

                [3, "desc"]

        ],

        "sPaginationType": "full_numbers",

    });

} );

使用columnDefs隐藏列

$(document).ready(function() {

    $('#example').dataTable( {

        "columnDefs": [

            {

                "targets": [ 2 ],

                "visible": false,

                "searchable": false  //不可通过第三列字段内容作为关键字来搜索

            },

            {

                "targets": [ 3 ],

                "visible": false

            }

        ]

    } );

} );

垂直和水平滚动

//垂直滚动

$(document).ready(function() {

    $('#example').dataTable( {

        "scrollY":        "200px",

        "scrollCollapse": true,

        "paging":         false

    } );

} );

//水平滚动

$(document).ready(function() {

    $('#example').dataTable( {

        "scrollX":   true,

    } );

} );

数字表达

$(document).ready(function() {  //$433.060,00

    $('#example').dataTable( {

        "language": {

            "decimal": ",",

            "thousands": "."

        }

    } );

} );

语言选择

$(document).ready(function() {

    $('#example').dataTable( {

        "language": {

            "sProcessing": "<img src='/images/datatable_loading.gif'>  努力加载数据中.",

            "sLengthMenu": "每页显示 _MENU_ 条记录",

            "sZeroRecords": "抱歉， 没有找到",

            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",

            "sInfoEmpty": "没有数据",

            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",

            "sZeroRecords": "没有检索到数据",

            "sSearch": "模糊查询:  ",

            "oPaginate": {

                "sFirst": "首页",

                "sPrevious": "前一页",

                "sNext": "后一页",

                "sLast": "尾页"

            }

        },

    } );

} );

分页长度选择

$(document).ready(function() {

    $('#example').dataTable( {

        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

    } );

} );

多个表控制元件

$(document).ready(function() {

    $('#example').dataTable( {

        "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'

    } );

} );

//在表格首部和尾部均有iflp的信息，并且上下是同步的

自定义toolbar

$(document).ready(function() {

    $('#example').dataTable( {

        "dom": '<"toolbar">frtip'

    } );

    $("div.toolbar").html("<button class='btn btn-primary add_server'><span>添加物理机</span></button>");

        $(".add_server").click(function(){

          location.href ="/server/import"

        })

} );

列渲染Column rendering

操纵一单元格的内容，这种技术可用于添加链接，基于内容的规则，需要指定颜色或任何其他形式的文本操作非常有用。

$(document).ready(function() {

    $('#example').dataTable( {

        "columnDefs": [

            {

                "render": function ( data, type, row ) {

                    return data +' ('+ row[3]+')';

                },

                "targets": 0

            },

            { "visible": false,  "targets": [ 3 ] }

        ]

    } );

} );

设置表的默认属性--Setting defaults

$.extend( $.fn.dataTable.defaults, {

    "searching": false,

    "ordering": false

} );

DOM / jQuery events

$(document).ready(function() {

    $('#example').dataTable();

    $('#example tbody').on('click', 'tr', function () {

        var name = $('td', this).eq(0).text();

        alert( 'You clicked on '+name+'\'s row' );

    } );

} );

行回调

$(document).ready(function() {

    $('#example').dataTable( {

        "createdRow": function ( row, data, index ) {

            if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {

                $('td', row).eq(5).addClass('highlight');

            }

        },

        "rowCallback": function(row, data) {

            // ip列添加链接

            if(data.ip) {

              $('td:eq(3)', row).html('<a target="_blank" href=http://' + data.ip + '>' + data.ip + '</a>');

            }

        },

    } );

} );

http://www.cnblogs.com/zhoujie/p/js4.html

巴特西

前端常用功能记录(三)—datatables表格初始化（转）

最新文章

热门文章