datatables动态添加隐藏行

来源：互联网发布：怪物猎人3捏脸数据库编辑：程序博客网时间：2024/06/17 19:09

开发的是订单管理页面，要实现功能，用户查看订单列表，单击详情时从后台取到该订单内的所有商品并胴体展示在表格行内，比较实用的一个内容。

未展开前如上图。

展开后如上图。

html部分

<div class="adv-table" >                        <table class="table table-bordered table-striped" id="sendorder">                          <thead>                            <tr>                            <th>详情</th>                              <th>订单号</th>                                <th>订单备注</th>                              <th>金额</th>                             <th>地址</th>                             <th>下单时间</th>                            <th>订单状态</th>                             <th>管理</th>                            </tr>                          </thead>                        </table>                      </div>

js初始化datatables

var sendtable=$("#sendorder").DataTable({    order:[["5",'desc']],//按订单创建时间降序排序    autoWidth:false,//关闭自动计算列宽    searching:true,    page:false,    info:true,    processing: true,    serverSide: true,    ajax:"<?php echo APP_URL_ROOT.'/order/waitsend'?>",    columns:[ //定义第一列为列动态添加/隐藏的标签，点击会触发显示/隐藏列操作      {              <span style="white-space:pre"></span>"class":'details-control',              <span style="white-space:pre"></span>"orderable":false,             <span style="white-space:pre"></span> "data":null,             <span style="white-space:pre"></span> "defaultContent":'<i id="details-button" class="fa fa-chevron-circle-down fa-2x center-block" style="margin-left:5px"></i>'             <span style="white-space:pre"></span> },      {data:"OID",width: "8%"},      {data:"MARK",width: "20%"},      {data:"ACTUAL",width: "8%"},      {data:"ADDRESS",width: "22%"},      {data:"STIME",width: "10%"},      {data:"STATE",width: "10%",render:function (data) {      return '准备发货';      }},      {data:null,width: "20%"}    ],    columnDefs:[{      targets:-1,      data:null,      defaultContent:"<button id='tipsend' class='btn btn-info btn-xs'>安排发货</button><button id='cancelo' class='btn btn-danger btn-xs col-xs-offset-1'>取消订单</button>",    }    ]  });

//调用行内折叠商品通用方法var a=$('#ordertable tbody');//当前table对象var b=alltable;//datatable对象getdetail(a,b);

行内动态添加/隐藏js方法

function getdetail (table1,table2) {//table1为当前table对象，table2为实例化好的datatable对象 table1.on('click', 'td.details-control', function () {//对表格第一列绑定单击事件 var tr = $(this).closest('tr');        var row = table2.row( tr );        var oid=$(this).next().text();        if ( row.child.isShown() ) {//如果详情列未显示，添加一些样式            $(this).children().removeClass('fa-chevron-circle-up');            $(this).children().addClass('fa-chevron-circle-down');            row.child.hide();            tr.removeClass('shown');        }        else {            $(this).children().removeClass('fa-chevron-circle-down');            $(this).children().addClass('fa-chevron-circle-up');            //console.log(cache);           if (cache[oid]) {//相应订单数据已存在，cache是一个全局变量，功能相当于缓存，存储订单详情内容，避免反复从服务器读取数据           row.child(cache[oid]).show();tr.addClass('shown');//console.log('cache exist');            } else{//缓存数据不存在，存储数据<span style="white-space:pre"></span>$.post("<?php echo APP_URL_ROOT.'/order/get_order_datail'?>",{OID:oid},function (data1) {            row.child(data1).show();            tr.addClass('shown');            cache[oid]=data1;    });              }        }}); }

就此大功告成，使用了ajax读取订单详情然后异步加载信息，其他的都很好理解，有兴趣的可以试一试。

0 0