zoukankan      html  css  js  c++  java
  • Datatables js 复杂表头 合并单元格

    x

    →Datatables官网←

    x

    项目中用到的Table都是用Datatables插件来搞得;
    以前都是生成一般性的table;
    近期要生成一些复杂表头,合并单元格之类的;
    研究了一下.

    x

    去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代码,蛋疼啊...

    后来看到了[创建行回调(Row created callback)]哪里的时候 ,豁然开朗!!!   先上行回调的官网js代码>>>

    $(document).ready(function() {
        $('#example').dataTable( {
            "createdRow": function ( row, data, index ) {
                if ( data[5].replace(/[$,]/g, '') * 1 > 4000 ) {
                    $('td', row).eq(5).css('font-weight',"bold").css("color","red");
                }
            }
        } );
    } );

    最终解决方案(修改下上面的代码即可)

    $(document).ready(function() {
        $('#example').dataTable( {
            "createdRow": function ( row, data, index ) {
                            //生成了行之后,开始生成表头>>>
                                if (index == 1) {
                                    var innerTh = '<tr><th rowspan="2">Name</th>';
                       var columnsCount = 3;//具体情况
                                    innerTh +='<th colspan="2">Information</th>';                             
                       innerTh +='<th colspan="3">Contact</th>';                               
                                    innerTh += '</tr>';
                       //table的id为"id_table"
                                    document.getElementById('id_table').insertRow(0);
                                    var $tr = $("#id_table tr").eq(0);
                                    $tr.after(innerTh);
                                }
                            } } ); } );

    x

    总结-

    其实会用[创建行回调]之后,
    复杂表头只是一个demo了,
    想搞其他的只要操作table就行了,比如合并单元格,嘎嘎···
    抛砖引玉了...
  • 相关阅读:
    CCS过渡和动画
    使用Vue.prototype在vue中注册和使用全局变量
    vuex的使用
    Vue组件懒加载
    JavaScript 箭头函数(Lambda表达式)
    JS命名规范
    css命名规范
    vertical-align和line-height的理解及实例
    </2017><2018>
    给当当同学的random data
  • 原文地址:https://www.cnblogs.com/love-zf/p/7124016.html
Copyright © 2011-2022 走看看