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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
php swoft框架实例用法
2020/12/22 PHP
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
jQuery聚合函数实例
2015/05/21 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
js实现星星打分效果
2020/07/05 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python Django批量导入不重复数据
2016/03/25 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python八皇后问题的解决方法
2018/09/27 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
公司领导推荐信
2013/11/12 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
大雁塔导游词
2015/02/04 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
亲戚关系证明
2015/06/24 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL