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实现鼠标经过显示动画边框特效
Mar 24 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python logging日志模块的详解
2017/10/29 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
老同学聚会感言
2014/02/23 职场文书
教师个人自我评价
2015/03/04 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
八年级作文之友谊
2019/12/02 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python