Home Forums Porto Admin Template How to add multiple datatables in same page

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by Support2. This post has been viewed 123 times
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10031203
    xlinkinfocom
    Participant

    Hi, I am using your added Datatable asset in my admin panel. I want to add three datatables in a single (same) page. How to achieve this ? Please assist.

    Thanks in advance.


    #10031206
    Support2
    Keymaster

    Hello,

    Here is the code you need:

    HTML
    https://pastebin.com/raw/Csu5ZZKF
    * Note the id of each table.

    Change the code in (js/examples/examples.datatables.default.js) to this new:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p'
    		});
    
    		$('#datatable-default2').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p'
    		});
    
    		$('#datatable-default3').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p'
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

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

    Kind Regards,

    Rodrigo.


    #10031219
    xlinkinfocom
    Participant

    Hi, I am using “datatable-tabletools” This code is not working… Is there any mistake I did ?

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    		var $table = $('#datatable-tabletools');
    		var $table2 = $('#datatable-tabletools2');
    		
    
    		var table = $table.dataTable({
    			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			buttons: [ 'print', 'excel', 'pdf' ],
    			"iDisplayLength": 10,
    	"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    		});
    		
    		$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('#datatable-tabletools_wrapper');
    
    		$table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );
    
    		$('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
    		
    		var table2 = $table2.dataTable({
    			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			buttons: [ 'print', 'excel', 'pdf' ],
    			"iDisplayLength": 10,
    	"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    		});
    
    		$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('#datatable-tabletools_wrapper2');
    
    		$table2.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper2 .dt-buttons' );
    
    		$('#datatable-tabletools_wrapper2').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
    		
    		
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    #10031221
    Support2
    Keymaster

    Hello,

    Almost there. Here is the code you need:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    		var $table = $('#datatable-tabletools'),
    			$table2 = $('#datatable-tabletools2');
    
    		var table = $table.dataTable({
    			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			buttons: [
    				{
    					extend: 'print',
    					text: 'Print'
    				},
    				{
    					extend: 'excel',
    					text: 'Excel'
    				},
    				{
    					extend: 'pdf',
    					text: 'PDF',
    					customize : function(doc){
    			            var colCount = new Array();
    			            $('#datatable-tabletools').find('tbody tr:first-child td').each(function(){
    			                if($(this).attr('colspan')){
    			                    for(var i=1;i<=$(this).attr('colspan');$i++){
    			                        colCount.push('*');
    			                    }
    			                }else{ colCount.push('*'); }
    			            });
    			            doc.content[1].table.widths = colCount;
    			        }
    				}
    			]
    		});
    
    		$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('#datatable-tabletools_wrapper');
    
    		$table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );
    
    		$('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
    
    		var table2 = $table2.dataTable({
    			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			buttons: [
    				{
    					extend: 'print',
    					text: 'Print'
    				},
    				{
    					extend: 'excel',
    					text: 'Excel'
    				},
    				{
    					extend: 'pdf',
    					text: 'PDF',
    					customize : function(doc){
    			            var colCount = new Array();
    			            $('#datatable-tabletools2').find('tbody tr:first-child td').each(function(){
    			                if($(this).attr('colspan')){
    			                    for(var i=1;i<=$(this).attr('colspan');$i++){
    			                        colCount.push('*');
    			                    }
    			                }else{ colCount.push('*'); }
    			            });
    			            doc.content[1].table.widths = colCount;
    			        }
    				}
    			]
    		});
    
    		$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('#datatable-tabletools2_wrapper');
    
    		$table2.DataTable().buttons().container().prependTo( '#datatable-tabletools2_wrapper .dt-buttons' );
    
    		$('#datatable-tabletools2_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    * Note the #datatable-tabletools2_wrapper selector.

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

    Kind Regards,

    Rodrigo.


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