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 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]);
        })
      },
    });
  }

效果图：

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

赞 (0)

相关推荐

  • jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能.分享给大家供大家参考,具体如下: 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入jquery.datatables.layer html代码: <div class="thead"> <input placeholder="请输入搜索内容" id="searchTitle" type=&quo

  • jQuery表格插件datatables用法总结

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 使用方

  • jQuery表格插件datatables用法详解

    jQuery表格插件datatables用法详解

    一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二.如何使用 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我

  • jQuery DataTables插件自定义Ajax分页实例解析

    jQuery DataTables插件自定义Ajax分页实例解析

    一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

  • jquery表格datatables实例解析 直接加载和延迟加载

    参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选), 由于时间紧,省略了很多,所以总结份简化版的仅供参考. 1.直接加载,这个比较简单,如下 <div id="tid" class="col-sm-12 col-md-12"> <div id="secondtid" hidden="hidden"></div

  • jQuery+Datatables实现表格批量删除功能【推荐】

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 最近遇到这样的需求要求把表格批量删除.下面通过实例代码给大家介绍下. 1:点击全选的选择框CheckBox,选中以下列表中所有的选择框 2:再次点击全选的选择框CheckBox,不选中以下列表中所有的选择框 3:单选某个选择框 如图所示: http://recordit.co/GLj5a5BWo9 简单代码demo: <thead> <tr role="row&q

  • jQuery dataTables与jQuery UI 对话框dialog的使用教程

    jQuery dataTables与jQuery UI 对话框dialog的使用教程

    首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件. 官方网站及其下载地址:http:/www.datatables.net 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 2.对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript的aler

  • Jquery Datatables的使用详解

    参考: Datatables中文网 Datatables官网 Datatables 是一款强大的Jquery表格处理插件,样式方面可以兼容bootstrap3/4.JqueryUi等,也有默认的样式可以选择.使用Datatables可以很灵活的从服务端通过ajax更新表格数据,实现排序.分页等功能. 一.安装 登录官网下载,可以看到有一个选择的表单让你自定义下载包的内容,可以选择样式.扩展组件.Jquery库等,这个可以根据自己的需求下载,也可以先只下载Default的就可以了. 在你的项目中使

  • jQuery中Datatables增加跳转到指定页功能

    下面一段代码是关于datatable增加跳转到指定页功能,具体代码如下所示: var mytable = $('#datatables'); mytable.dataTable( { "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType"

  • JQuery.dataTables表格插件添加跳转到指定页

    JQuery.dataTables表格插件添加跳转到指定页

    一.解决方案 1.添加自定义工具栏,嵌入文本框 "dom": 'l<"toolbar">frtip', //自定义工具栏 //设置工具栏内容 //l - length changing input control //f - filtering input //t - The table! //i - Table information summary //p - pagination control //r - processing display e

  • 利用JQuery实现datatables插件的增加和删除行功能

    利用JQuery实现datatables插件的增加和删除行功能

    在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8" /> <script src=&quo

  • jQuery.datatables.js插件用法及api实例详解

    jQuery.datatables.js插件用法及api实例详解

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

  • jquery+php实现导出datatables插件数据到excel的方法

    本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法.分享给大家供大家参考.具体如下: DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 1. 自动分页处理 2. 即时表格数据过滤 3. 数据排序以及数据类型自动检测 4. 自动处理列宽度 5. 可通过CSS定制样式 6. 支持隐藏列 7. 易用 8. 可扩展性和灵活性 9. 国际化 10.动态创建表格 11.

  • jQuery插件datatables使用教程

    jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能. 如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用jquery的datatables插件来实现了发现还是比较简单的,今天我们来看一个例子,来说明这个插件的使用,基本原理是view函数从数据库中读出数据,jquery通过ajax获取数据并在前端展示出来,我们先定义一个models.py,如下: from django.dbimport models

  • jQuery表格插件datatables用法汇总

    DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下 一.初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&

  • jQuery插件dataTables添加序号列的方法

    官网方法实例: $(document).ready(function() { var t = $('#example').DataTable({ "columnDefs": [{ "searchable": false, "orderable": false, "targets": 0 }], "order": [[1, 'asc']] }); t.on('order.dt search.dt', func

  • jQuery插件DataTables分页开发心得体会

    写Blog目的:不是为人气,只是留份笔记:啰嗦不要紧,只怕有遗漏,以后想不起来. 官网:https://datatables.net/ 中文官网:http://datatables.club/ 开发环境:Python 3.6.0.Anaconda 4.3.1.Django.JetBrains PyCharm 2017.1.5 按我项目的开发过程简单整理. 1.第一版本,无分页. 在此之前有用到过DataTables(更多的是easyui中的Datagrid,另之前服务端是PHP),因此想着前端/

  • jQuery Datatables表头不对齐的解决办法

    jQuery Datatables表头不对齐的解决办法

    我们用Datatables经常会遇到这种情况,就是浏览器或者HTML里元素改变大小或分辨率后,标题就会出现不对齐现象.这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性,它会使Table标签中多一个style="width:**px;"属性,这就导致了变化大小时标题对不齐现象. <table id="example" class="table table-border table-bordere

随机推荐