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

其实上篇说的也算是jQuery Datatables的初始化,但主要是对某些字段意义的理解。下面记录的是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>‘);
            }
        },

    } );
} );
时间: 2024-10-11 02:10:54

前端常用功能记录(三)—datatables表格初始化的相关文章

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

数据源 我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行,每一行同样是一个数组. (字段的命名可以使用类型加字段名称也可以直接使用如aaData,也可以是data,aoColumns,也可以是columns) 如: $(document).ready(function() { $('#demo').html( '<table class="tabl

前端常用功能记录(二)—datatables表格(转)

前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添花!DataTables提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化.统计等强大功能. 工作中对程序员的学习模式才深有体会,不是从入门到精通,而是从会用到了解.对于我来说,基本都是拿到一个知识先做个东西出来,再来细细品味个中的细节,然后

前端常用功能记录(二)—datatables表格

并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添花!DataTables提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化.统计等强大功能. 工作中对程序员的学习模式才深有体会,不是从入门到精通,而是从会用到了解.对于我来说,基本都是拿到一个知识先做个东西出来,再来细细品味个中的细节,然后再慢慢理解.从粗到细,从大到小,呵呵,这种"逆向学

转 My97日历控件常用功能记录

My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官方文档中有很详细的介绍,正是因为很详细所以查找起来不是很方便. 1 可以选择任何日期 <input id="txtDate" class="Wdate" type="text" onfocus="WdatePicker()"

Keil的使用方法 - 常用功能(三)

Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(二),该文章接着上一篇文章总结. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链接(微信点击阅读原文),Keil使用方法(汇总): http://blog.csdn.net/ybhuangfugui/article/details/51647893 今天总结关于Keil配置里面的选项一些常用功能,不会总结每一个功能,计划在今后的文章中会整理出详细的文档说明. 本着免费分享的原则,方便大家手机学习知识,每天在微信

造轮子:My97日历控件常用功能记录

http://www.cnblogs.com/oec2003/archive/2009/12/05/1617697.html 1 可以选择任何日期 <input id="txtDate" class="Wdate" type="text" onfocus="WdatePicker()" /> 2 今天以前的日期 <input type="text" class="Wdate&qu

前端常用功能

1.选择框 绑定事件,将所选择的值传给js脚本 <td  id="TheadOdds0"><select onchange="SelectCompany(this.options[this.selectedIndex].value);" id="oddsSelect" name="oddsSelect"><option value=o_0>平均欧赔</option><opt

前端日常开发常用功能系列之数组去重

这是前端日常开发常用功能这个系列文章的第一篇,该系列是日常开发中一些常用的功能的再总结.再提炼,以防止遗忘,便于日后复习.该系列预计包含以下内容: 防抖.节流.去重.拷贝.最值.扁平.偏函数.柯里.惰性函数.递归.乱序.排序.注入.上传.下载.截图... 本文所记录的数组去重方法只针对一维数组,且数组项都是基本数据类型值 方法一: 二重循环比较去重(因为使用的是‘===’比较,适合数组项为数值.字符串的数组) const unique1 = arr => { const tempArr = ar

达梦数据库常用功能及命令记录--持续更新

达梦数据库常用功能及命令记录 达梦数据库语句的使用总体来说跟oracle很接近的,这篇文章主要是把常用的情况和语句做了记录,并且后续还会不断的持续更新 达梦数据库常用说明 1.测试查询语句:select 1;select top 2 from v$dm_ini; select from v$dm_ini limit 2;select * from v$dm_ini where rownum<2; 2.达梦大小写:DM7.6之前版本默认密码是转为大写存储的,登录时要注意.比如用户设置test/te