Home Forums Porto Admin – Responsive HTML5 Template Advance Tables with modal pop up

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

    Hi,
    I need help to extend the Advance Tables (Basic With Table Tools) and I’m using JSON data to populate the tables.
    I need to add a button on the first column of every row and when clicked a modal-with-animation pop up showing the selected row value of certain columns inside the modal.
    **If you can give me an example on how to get the column value because I need to call a JSON URL with parameter and display that JSON response inside that modal pop up.

    Thanks in advance!!

    Regards,
    Charles


    #10031860
    Support
    Keymaster

    Hello, unfortunately that is a little complicated to do and that question is a bit beyond from what support can offer as we don’t have a similar example available on Porto Admin.

    But here are a few tips for you to get started with that.

    For example, you can set the ajax return with links and parameters to send to the modal ajax request:

    {
    	"aaData": [
    		["<a href='#'>Show Modal</a>","Internet Explorer 4.0","Win 95+","4","X"],
    		["<a href='#'>Show Modal 2</a>","Internet Explorer 4.0","Win 95+","4","X"]
    	]
    }

    In the JS you can use the callback to initialize the modal after the ajax is completed:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		var $table = $('#datatable-ajax');
    		$table.dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			bProcessing: true,
    			sAjaxSource: $table.data('url'),
    			fnDrawCallback: function( oSettings ) {
    				
    				// Initialize the modals here...
    				console.log( oSettings.nTableWrapper );
    				
    			}
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    We hope that helps.

    Best Regards,

    Okler Themes


    • This reply was modified 1 month, 1 week ago by Support.
    #10031935
    ranvox
    Participant

    Hi,

    Is it possible to extend your explanation with a working example for me?
    a simple table with a button in a column and on.click a modal with a hello text and a close button.

    Thanks.


    #10031937
    ranvox
    Participant
    This reply has been marked as private.
    #10031943
    Support2
    Keymaster

    Hello,

    Here’s the code you need for a working modal/lightbox:

    HTML:

    <div id="dialog" class="modal-block mfp-hide">
    	<section class="card">
    		<header class="card-header">
    			<h2 class="card-title">Are you sure?</h2>
    		</header>
    		<div class="card-body">
    			<div class="modal-wrapper">
    				<div class="modal-text">
    					<p>Are you sure that you want to delete this row?</p>
    				</div>
    			</div>
    		</div>
    		<footer class="card-footer">
    			<div class="row">
    				<div class="col-md-12 text-right">
    					<button id="dialogConfirm" class="btn btn-primary">Confirm</button>
    					<button id="dialogCancel" class="btn btn-default">Cancel</button>
    				</div>
    			</div>
    		</footer>
    	</section>
    </div>

    * Put this HTML in any part of your page.

    JS:

    $.magnificPopup.open({
    	items: {
    		src: '#dialog',
    		type: 'inline'
    	},
    	preloader: false,
    	modal: true
    });
    
    $('#dialogCancel').on( 'click', function( e ) {
    	e.preventDefault();
    	$.magnificPopup.close();
    });
    
    $('#dialogConfirm').on( 'click', function( e ) {
    	e.preventDefault();
    	$.magnificPopup.close();
    });

    Include on footer the script of magnific popup:

    <script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>

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

    Kind Regards,

    Rodrigo.


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