Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10031936
    ranvox
    Participant

    Hi,

    I need some help on how to modify the “editable tables” example
    – Remove the Add+ button
    – Actions buttons (only delete button)
    – pop up modal only close button
    – possible to add “Table Tools” excel only ?
    – possible to load the sample data via ajax or via json file?

    I hope you can help me on this……. thanks in advance!!!!

    Regards,
    Charles


    #10031942
    Support2
    Keymaster

    Hello Charles,

    1) To remove the Add+ button just take off this part of HTML:

    <div class="row">
    	<div class="col-sm-6">
    		<div class="mb-3">
    			<button id="addToTable" class="btn btn-primary">Add <i class="fas fa-plus"></i></button>
    		</div>
    	</div>
    </div>

    2) To maintain only the remove button in actions, just take off the edit button at HTML:

    <a href="#" class="on-default edit-row"><i class="fas fa-pencil-alt"></i></a>

    * Do it for all rows.

    3) Regarding the “popup modal only close button”. if we remove the confirm button, then the rows will not be deleted. Anyway you can do this with this custom css in (css/custom.css):

    #dialogConfirm {
    	display: none;
    }

    4) For a excel button:
    4.1) Add tableTools scripts on footer like the image below:

    4.2) Change the code in examples.datatables.editable.js to this new:

    build: function() {
    	this.datatable = this.$table.DataTable({
    		dom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    		aoColumns: [
    			null,
    			null,
    			null,
    			{ "bSortable": false }
    		],
    		buttons: [ 'excel' ]
    	});
    
    	$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('#datatable-editable_wrapper');
    
    	this.$table.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;
    },

    5) Regarding loading data via AJAX this is possible with DataTables, but Porto Admin don’t comes with a ready code for this. We suggest for you take a look on the DataTables documentation here: https://datatables.net/examples/ajax/

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

    Kind Regards,

    Rodrigo.


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