从数据表 jquery 中的打印中删除最后一行（操作）

Question

在打印使用 jQuery 数据表的网页时，我试图删除最后一个操作行。我正在使用数据表来显示数据并且可以正常工作，但是当我尝试打印默认打印选项时，它会打印编辑/删除部分。

这是我的桌子：

          <table id="dataTable" class="table table-bordered text-center">
            <thead>
                <tr>
                    <th width="5%">SN</th>
                    <th>Customer Code</th>
                    <th>Customer Name</th>
                     <th>customer address</th>
                      <th>customer phone</th>
                    <th>customer city</th>
                    <th>customer email</th>
                    <th>openig due</th>
                  
                    <th>customer status</th>
                    
                    <th width="8%" class="text-center">Action</th>
                </tr>
            </thead>
            <tbody>
                @php $i=1; @endphp
           @foreach($customer as $row)
                <tr>
                    <td>{{$i++}}</td>
                    <td>{{$row->customer_code}}</td>
                    <td>{{$row->customer_name}}</td> 
                    <td>{{$row->customer_address}}</td> 
                    <td>{{$row->customer_phone}}</td> 
                    <td>{{$row->customer_city}}</td>
                    <td>{{$row->customer_email}}</td> 
                    <td>{{$row->openig_due}}</td>
                    
                    <td>
                      
                       @if($row->customer_status==1)
                       <a href="#" class="btn btn-sm btn-success">active</a>

                       @else
                       <a href="#" class="btn btn-sm btn-danger">deactive</a>

                       @endif
                       

                    </td>
                    <td >
                      

                         <a  href="{{url('admin/customerEdit/'.$row->id)}}" class="btn btn-warning btn-sm waves-effect waves-light"> 
                        <i class="fa fa-edit"></i> <span> 
                        Edit
                      </span>
                      </a>

                        <a href="{{url('admin/customerdlt/'.$row->id)}}" class="btn btn-danger btn-sm waves-effect waves-light" id="delete"> X
                        <i class="fa fa-delete"></i> <span> 
                       Delete 
                      </span>
                      </a> 
                    
                        
                     
                      

                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>

这是我的数据表 jquery

$("#dataTable").DataTable({
  processing: true,
  serverSide: true,
  aaSorting: [],
  columnDefs: [ { orderable: false, targets: [0,-1] }],
  ajax: dataUrl,
  buttons: {
      buttons: [
          { extend: 'excel', className: 'btn-outline-dark' },
          { extend: 'print', className: 'btn-outline-dark'}
    
      ]
  }
}).buttons().container().appendTo('#dataTable_wrapper .col-md-6:eq(0)');

如何在单击打印按钮时删除最后一行？

Answer 1

您可以使用 CSS 来隐藏 @media 语句中行的最后一个单元格，以便仅在打印页面时执行该操作。试试这个；

@media print {
  tr > td:last-of-type {
    display: none;
  }
}

Answer 2

您可以在使用 CSS 打印时隐藏元素：

@media print{
   .noprint{
       display:none;
   }
}

现在将类添加到您不想打印的按钮和其他元素中。

您可以使用$loop->iteration 值代替$i 变量的另一件事。 Laravel docs

Answer 3

您可以在声明按钮https://datatables.net/extensions/buttons/时在javascript中执行此操作

https://datatables.net/reference/option/buttons.buttons.extend#Description

https://datatables.net/reference/button/

https://datatables.net/extensions/buttons/examples/html5/columns.html

exportOptions: {
    columns: ':visible:not(:contains(Actions))'
},

完整示例

buttons: [
{
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible:not(:contains(Actions))'
                    },
                    orientation: 'landscape',
                    customize: function (win) {
                        var last = null;
                        var current = null;
                        var bod = [];

                        var css = '@page { size: landscape; }',
                            head = win.document.head || win.document.getElementsByTagName('head')[0],
                            style = win.document.createElement('style');

                        style.type = 'text/css';
                        style.media = 'print';

                        if (style.styleSheet) {
                            style.styleSheet.cssText = css;
                        } else {
                            style.appendChild(win.document.createTextNode(css));
                        }

                        head.appendChild(style);
                    },
                    className: 'btn btn-sm btn-primary js-tooltip',
                    text: '<i class="fa fa-print"></i>',
                    attr: {
                        title: 'Print',
                        "data-toggle": "tooltip",
                        "data-placement": "bottom",
                        "data-animation": "true",
                    }
                }
]