jQuery Datatables 动态列+跨列合并实现代码


Posted in jQuery onJanuary 30, 2020

有时候需要用到

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 class="table text-nowrap table-striped table-bordered table-hover dataTables_list">
<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]);
        })
      },
    });
  }

效果图:

jQuery Datatables 动态列+跨列合并实现代码

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

jQuery 相关文章推荐
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
jQuery实现轮播图效果demo
Jan 11 #jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
You might like
PHP 中的批处理的实现
2007/06/14 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
python文件和目录操作函数小结
2014/07/11 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
简单了解python元组tuple相关原理
2019/12/02 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
总经理职责范文
2013/11/08 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
西式婚礼主持词
2014/03/13 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
租车协议书范本
2014/04/22 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
高中综合实践活动总结
2014/07/07 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2014年财政所工作总结
2014/11/22 职场文书
亮剑精神观后感
2015/06/05 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
基于Redis过期事件实现订单超时取消
2021/05/08 Redis