Home Forums Porto Admin Template Advanced Tables Excel button location

This topic contains 4 replies, has 2 voices, and was last updated by  ranvox 2 months, 1 week ago. This post has been viewed 139 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10029344

    ranvox
    Participant

    Hi,

    How can I change the location of the print | excel | pdf button?

    I want to place it after the search inputbox and also on the “card-footer” right side.

    I want to customize the excel button with excel Icon as well.



    Template Version: latest
    #10029346

    Support2
    Keymaster

    Hello,

    Here is the code you need:

    (examples.datatables.tabletools.js):

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    		var $table = $('#datatable-tabletools');
    
    		var table = $table.dataTable({
    			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t><"text-right pt-3"B>p',
    			buttons: [
    				{
    					extend: 'print',
    					text: '<i class="fas fa-check"></i>',
    					titleAttr: 'Print'
    				},
    				{
    					extend: 'excel',
    					text: '<i class="fas fa-check"></i>',
    					titleAttr: 'Spreadsheet'
    				},
    				{
    					extend: 'pdf',
    					text: '<i class="fas fa-check"></i>',
    					titleAttr: 'PDF'
    				}
    			]
    		});
    
    		$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('.table-responsive');
    
    		$table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );
    
    		$('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    * Change the icons class.

    Kind Regards,

    Rodrigo.


    #10029352

    ranvox
    Participant

    How can i place the buttons inline after the search box?


    #10029355

    Support2
    Keymaster

    Hello,

    Try with this code:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    		var $table = $('#datatable-tabletools');
    
    		var table = $table.dataTable({
    			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t><"text-right pt-3"B>p',
    			buttons: [
    				{
    					extend: 'print',
    					text: '<i class="fas fa-check"></i>',
    					titleAttr: 'Print'
    				},
    				{
    					extend: 'excel',
    					text: '<i class="fas fa-check"></i>',
    					titleAttr: 'Spreadsheet'
    				},
    				{
    					extend: 'pdf',
    					text: '<i class="fas fa-check"></i>',
    					titleAttr: 'PDF'
    				}
    			]
    		});
    
    		$('<div />').addClass('dt-buttons text-right d-inline-block float-right ml-2').appendTo('#datatable-tabletools_filter');
    
    		$table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );
    
    		$('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    * Note the “dt-buttons” “appendTo”.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029368

    ranvox
    Participant

    Works Perfectly. Thanks.


Viewing 5 posts - 1 through 5 (of 5 total)