Question posted in
You can find the official documentation here.

remove last row(Action) from print in datatable jquery – Jquery ajax

I am trying to remove the last action row when printing my webpage that uses a jQuery datatable. I am using datatable for showing data and that works, but when I try to print the default print option, it prints the edit/ delete part.

Here is my table :

          <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>

and Here is my jquery for data table

$("#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)');

How can I remove last row when I click the print button?

Tags:

3

Answers


  1. 0

    You can use CSS to hide the last cell of the row along the @media statement to perform that action only when the page is printed. Try this;

    @media print {
  tr > td:last-of-type {
    display: none;
  }
}
    Login or Signup to reply.
  2. 0

    You can hide elements when printing with CSS:

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

    Now add the class to the buttons and other elements that you don’t want to print.

    Another thing you can use the $loop->iteration value instead of the $i variable. Laravel docs

    Login or Signup to reply.
  3. 0

    You can do this in the javascript when declaring your buttons https://datatables.net/extensions/buttons/

    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))'
},

    Full example

    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",
                    }
                }
]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search