这篇文章主要介绍了jQuery Datatables 动态列+跨列合并实现代码,需要的朋友可以参考下

有时候需要用到

html

<input type="hidden" name="thead_key" id="thead_key" value="<?php if(isset($thead_key)):?><?php echo $thead_key;?><?php endif;?>">
<input type="hidden" name="thead_num" id="thead_num" value="<?php if(isset($thead_num)):?><?php echo $thead_num;?><?php endif;?>">

 

<table>
  <thead>
    <tr>
      <th rowspan="2"><div align="center">备注明细</div></th>
      <?php if(isset($thead_arr)):?>
      <th colspan="<?php echo count($thead_arr);?>"><div align="center">校区</div></th>
      <?php endif;?>
    </tr>
    <?php if(isset($thead_arr)):?>
    <?php foreach($thead_arr as $val):?>
    <th><div align="center"><?php echo $val;?></div></th>
    <?php endforeach;?>
    <?php endif;?>
  </thead>
</table>

js代码基于jquery

var oTable = null;
  var initTable = function()
  {
    var thead_key = $("#thead_key").val();
    var thead_num = $("#thead_num").val();

    thead_key = thead_key.split(',');

    var column_names = new Array();
    for(var i=0;i<=thead_num;i++)
    {
      column_names.push({"className":"text-c","sDefaultContent": ''})
    }

    oTable = $(".dataTables_list").dataTable({
      "sPaginationType": "full_numbers",
      "bLengthChange":true,
      "bFilter": false,//搜索栏
      "bProcessing": false,
      "bPaginate": true,
      "bServerSide": true,
      "bSort": false, //排序功能
      //"iDisplayLength":parseInt("{:config('admin_page_size')}"),
      "bAutoWidth": false,
      "sAjaxSource": "{:url('edu_report/ajax_school_group_product_list')}",
      "aoColumns": column_names,//封装好的数组

    //给行赋值
      "fnRowCallback": function(nRow, aData, iDisplayIndex)
      {
        $('td:eq(0)', nRow).html(aData.memo);

        $.each(thead_key, function(i, args)
        {
          $('td:eq('+(i+1)+')', nRow).html(aData["memo_cnt_"+args]);
        })
      },
    });
  }

效果图:

主要是参考思路与想法,具体的就介绍到这了,如果有帮助希望以后多多支持爱安网。

最新资讯
欧盟继续允许企业获取个人数据以刺激创新

欧盟继续允许企业获取

据报道,欧盟继续允许企业获取个人数据以刺激创新,但私人
人工智能进入深水区,与行业融合仍存挑战

人工智能进入深水区,与

在世界互联网大会·互联网发展论坛期间,不少AI从业人员
特斯拉计划在柏林超级工厂建设年产100GWh电池工厂

特斯拉计划在柏林超级

据国外媒体报道,电动汽车厂商特斯拉在柏林近郊勃兰登堡
京东诉天猫及阿里滥用市场支配地位 “二选一”第一案将开庭

京东诉天猫及阿里滥用

被称为“二选一”第一案的京东诉天猫及阿里巴巴滥用市
华为荣耀的劫,小米手机的运

华为荣耀的劫,小米手机

小米打了一场翻身仗。11月24日,小米发布了一份成绩不错
小米OV拿什么接盘华为?

小米OV拿什么接盘华为

在经历国内市场群雄混战以及印度和东南亚市场的激烈厮
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,