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 23 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python之Socket网络编程详解
2016/09/29 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python elasticsearch环境搭建详解
2019/09/02 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
keras输出预测值和真实值方式
2020/06/27 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
群众路线教育实践活动方案
2014/02/02 职场文书
汽车促销活动方案
2014/03/31 职场文书
同居协议书范本
2014/04/23 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
导游词格式
2015/02/13 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
学校证明范文
2015/06/24 职场文书
初中军训感想
2015/08/07 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA