当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2020-01-30 21:10

    有时候需要用到

    html

    <input type="hidden" name="thead_key"  value="<?php if(isset($thead_key)):?><?php echo $thead_key;?><?php endif;?>">
    <input type="hidden" name="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]);
            })
          },
        });
      }

    效果图:

    主要是参考思路与想法,具体的就介绍到这了,如果有帮助希望以后多多支持IIS7站长之家。