How to add Table Tools on Editable Tables

[Naresh Designs]

Hi Team,

Can you please help for Table Tools need to add on Editable Tables?

here is the link – https://www.okler.net/previews/porto-admin/3.1.0/tables-editable.html
I need to Print and PDF buttons

Thanks
Naresh

---

[Support]

Hello Naresh, thanks for your purchase.

Using as base the tables-editable.html page, please follow the steps below:

1) First add the scripts below next to datatables script on footer of page:

<script src="vendor/datatables/extras/TableTools/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script src="vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.bootstrap4.min.js"></script>
<script src="vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.html5.min.js"></script>
<script src="vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.print.min.js"></script>
<script src="vendor/datatables/extras/TableTools/JSZip-2.5.0/jszip.min.js"></script>
<script src="vendor/datatables/extras/TableTools/pdfmake-0.1.32/pdfmake.min.js"></script>
<script src="vendor/datatables/extras/TableTools/pdfmake-0.1.32/vfs_fonts.js"></script>

2) Change the build: function() { code at js/examples/examples.datatables.editable.js to:

build: function() {
	this.datatable = this.$table.DataTable({
		dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
		aoColumns: [
			null,
			null,
			null,
			{ "bSortable": false }
		],
		buttons: [
			{
				extend: 'print',
				text: 'Print'
			},
			{
				extend: 'pdf',
				text: 'PDF',
				customize : function(doc){
		            var colCount = new Array();
		            $('#datatable-editable').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-editable_wrapper');

	$('#datatable-editable').DataTable().buttons().container().prependTo( '#datatable-editable_wrapper .dt-buttons' );

	$('#datatable-editable_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');

	window.dt = this.datatable;

	return this;
},

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

Kind Regards,

Rodrigo.

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts