datatables inside fancybox

[pbern2]

hi does anyone here know how to do data tables inside fancy box and listing some price List?

<title>Purchase Order</title> <style> body{ font-size: smaller; } .form-control:focus { border-color: #28a745; box-shadow: 0 0 0 0rem rgb(255, 255, 255); } .floating-label-form-group { position: relative; border-bottom: 1px solid #e9ecef; } .form-select:focus { border-color: #28a745; box-shadow: 0 0 0 0rem rgb(255, 255, 255); } .fancybox-slide--iframe .fancybox-content { width : 800px; height : 600px; max-width : 80%; max-height : 80%; margin: 0; } @media (max-width: 480px) { .input-group-addon { width: 100%; box-sizing: content-box; white-space: pre-line; } } </style>

Purchase Order

Open this select menu One Two Three Create Sales Order For:

Supplier TTL This Week:

            <div class="row ">
                <label for="supplierttl" class="col-md-6 col-form-label form-label-sm py-0 text-start">TTL This Week:</label>
                <div class="col-md-6">
                    <input type="number" class="form-control form-control-sm text-end border-0" id="supplierttl" placeholder="0.00" readonly>
                </div>
            </div>
            <div class="row  ">
                <label for="supplierttl" class="col-md-6 col-form-label form-label-sm py-0 text-start">TTL This Month:</label>
                <div class="col-md-6">
                    <input type="number" class="form-control form-control-sm text-end border-0" id="supplierttl" placeholder="0.00" readonly>
                </div>
            </div>
        </div>    
        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12  border border-2 border-danger rounded ">
            <div class="row text-danger fw-bold ">
                <label for="supplierttl" class="col-md-6 col-form-label form-label-sm py-0 text-start ">PO Number:</label>
                <div class="col-md-6">
                    <input type="number" class="form-control form-control-sm text-end border-0 " id="supplierttl" placeholder="0.00" readonly >
                </div>
            </div>
            <div class="row  ">
                <label for="supplierttl" class="col-md-6 col-form-label form-label-sm py-0 text-start">Date:</label>
                <div class="col-md-6">
                    <input type="date" class="form-control form-control-sm text-end border-0 " id="supplierttl" placeholder="0.00" readonly >
                </div>
            </div>
            <div class="row  ">
                <label for="supplierttl" class="col-md-3 col-form-label form-label-sm py-0 text-start ">PO Type:</label>
                <div class="col-md-9">
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                </div>
        </div>
    </div>
</div>

<div class="container ">
    <div class="container" id="additionalItem">
        <div class="table-responsive">
            <table class="table table-sm table-hover table-bordered table-striped" id="example">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Item</th>
                        <th>Qty</th>
                        <th>Unit</th>
                        <th>Price</th>
                        <th>Amount</th>
                        <th>Discount</th>
                        <th>Net Amount</th>
                        <th>Remarks</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input class="form-check-input" type="checkbox" value="" id=""></td>
                        <td>box</td>
                        <td>2</td>
                        <td>pcs</td>
                        <td>100</td>
                        <td>200</td>
                        <td>10</td>
                        <td>190</td>
                        <td>remarks</td>
                        <td>
                            <a class="btn btn-danger btn-sm" type="button"  data-fancybox  data-src="#areyousureDelete" href="javascript:;">
                                <i class="fa-sharp fa-solid fa-trash"></i>
                            </a>

                        </td>
                    </tr>
                </tbody>
            </table>
        </div>                        
  </div>
    <div class="row">
        <div class="col-lg-8 border border-dark ">
            <div class="row ">
                <div class="col-12 text-center bg-success text-light p-2">Purchase Details</div>
                <div class="col-lg-4">
                    <div class="mb-1">
                    <label for="" class="form-label">Supplier:</label>
                    <select name="" id="" class="form-select form-select-sm">
                        <option value="">Select Customer</option>
                  </select> 
                </div>
                <div class="mb-1">
                    <label for="" class="form-label">Contact Person:</label>
                    <input type="text"
                        class="form-control form-control-sm" name="" id=""  placeholder="">    
                </div>
                <div class="mb-1">
                    <label for="" class="form-label">Address:</label>
                    <input type="text"
                        class="form-control form-control-sm" name="" id=""  placeholder="">    
                  </div>                   
            </div>
            <div class="col-lg-4">
                <div class="mb-1">
                    <label for="" class="form-label">PO Date:</label>
                    <input type="date"
                        class="form-control form-control-sm" name="" id=""  placeholder="">
                </div>
                <div class="mb-1">
                    <label for="" class="form-label">Delivery Schedule:</label>
                    <input type="date"
                        class="form-control form-control-sm" name="" id=""  placeholder="">
                </div>
                <div class="mb-1">
                    <label for="" class="form-label">Expiration Date:</label>
                    <input type="date"
                        class="form-control form-control-sm" name="" id=""  placeholder="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="mb-1">
                    <label for="" class="form-label">Terms:</label>
                    <select name="" id="" class="form-select form-select-sm">
                          <option value="">Select Customer</option>
                    </select> 
                  </div>
                  <div class="mb-3">
                    <label for="" class="form-label">Delivery To:</label>
                    <select name="" id="" class="form-select form-select-sm">
                          <option value="">Select Customer</option>
                    </select> 
                  </div>
                  <div class="col-12">
                        <a class="btn btn-success btn-sm" type="button" data-fancybox data-src="#additionalItem">
                            <i class="fa-sharp fa-solid fa-cart-flatbed-suitcase"></i>
                        Additional Item
                        </a>
                  </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 ">
        <div class="table-responsive " >               
            <table class="table table-sm table-bordered caption-top" >
                <caption class="text-center bg-success text-light fw-bold">PENDING REQUEST</caption>
                <thead class="text-center">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">ITEM</th>
                        <th scope="col">QTY</th>
                        <th scope="col">DUE DATE</th>
                        <th scope="col">APPROVED BY</th>
                    </tr>
                </thead>
                <tbody class="text-center" >
                    <tr>
                        <td>1</td>
                        <td>CHKNLQ</td>
                        <td>100</td>
                        <td>9/16/2022</td>
                        <td>Christopher Parafina</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>CHKNLQ</td>
                        <td>100</td>
                        <td>9/16/2022</td>
                        <td>Administrator</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>CHKNLQ</td>
                        <td>100</td>
                        <td>9/16/2022</td>
                        <td>Administrator</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>CHKNLQ</td>
                        <td>100</td>
                        <td>9/16/2022</td>
                        <td>Administrator</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>CHKNLQ</td>
                        <td>100</td>
                        <td>9/16/2022</td>
                        <td>Administrator</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>CHKNLQ</td>
                        <td>100</td>
                        <td>9/16/2022</td>
                        <td>Administrator</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

    </tbody>
</table>
<div class="row">
    <div class="col-6">
      <label for="" class="form-label">Remarks:</label>
      <textarea class="form-control" name="" id="" rows="2"></textarea>
    </div>
    <div class="col-6">
        <button class="btn btn-success float-end">Approved</button>
        <button class="btn btn-success float-end">Save Only</button>
    </div>
</div>

<script src="/bootstrap-5.2.1-dist/js/bootstrap.bundle.js"></script>
<script src="/jQuery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="/bootstrap-5.2.1-dist/fancybox/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript">

   
    // $(document).ready(function() {
    //     var table = $('#example').DataTable({
    //         "columnDefs": [{
    //             "visible": false,
    //             "targets": 2
    //         }],
    //         "order": [
    //             [2, 'asc']
    //         ],
    //         "displayLength": 25,
    //         "drawCallback": function(settings) {
    //             var api = this.api();
    //             var rows = api.rows({
    //                 page: 'current'
    //             }).nodes();
    //             var last = null;
    //             api.column(2, {
    //                 page: 'current'
    //             }).data().each(function(group, i) {
    //                 if (last !== group) {
    //                     $(rows).eq(i).before('<tr class="group"><td>' + group + '</td></tr>');
    //                     last = group;
    //                 }
    //             });

    //  $(document).ready(function() {
    //     $('[data-fancybox]').fancybox({
    //         loop: true,
    //         buttons: [
    //             "zoom",
    //             "slideShow",
    //             "fullScreen",
    //             "download",
    //             "thumbs",
    //             "close"
    //         ],
    //         thumbs: {
    //             autoStart: true
    //         }
    //     });
    // });
//      $(document).ready(function() {
//     $("[data-fancybox]").fancybox({
//         'width' : '75%',
//         'height' : '55%',
//         'autoScale' : false,
//         'transitionIn' : 'none',
//         'transitionOut' : 'none',
//         'titlePosition'         : 'inside',
//         'transitionIn'          : 'fade',
//         'transitionOut'         : 'fade',
//         'overlayColor'          : '#333',
//         'overlayOpacity'        : 0.9,          
//         touch: false,
//     }).trigger("click");

//     //launch on load after 5 second delay
//     // window.setTimeout('$("#reference-first")', 5000);
// });

// $(document).ready(function(){
// $('[data-fancybox="gallery"]').fancybox({
// buttons : [
// 'slideShow',
// 'fullScreen',
// 'thumbs',
// 'close'
// ],
// thumbs : {
// autoStart : true
// }
// });
// });

// $.fancybox.open({
// src : 'https://picsum.photos/200/300',
// type : 'iframe',
// opts : {
// afterShow : function( instance, current ) {
// console.info( 'done!' );
// }
// }
// });

// fancybox html bootstrap

</script>

PURCHASE ORDER DETAILS

#	ITEM	DESCRIPTION	QTY	UNIT	UNIT PRICE	AMOUNT	REMARKS	Action
1	CHKNLQ	Chicken Liquid	100	PCS	100	10000	Sample	Delete
2	CHKNLQ	Chicken Liquid	100	PCS	100	10000	Sample	Delete
3	CHKNLQ	Chicken Liquid	100	PCS	100	10000	Sample	Delete
4	CHKNLQ	Chicken Liquid	100	PCS	100	10000	Sample	Delete
5	CHKNLQ	Chicken Liquid	100	PCS	100	10000	Sample	Delete

[fancyapps]

Hi,

Well, Fancybox can display any HTML, so, there should not be any issue with tables. If you could create a live demo using any code playground (jsfiddle, codesandbox, etc), then it would be easier to help you.

[pbern2]

here is my js fiddle please help thank you
https://jsfiddle.net/pbern/sr2L561a/9/#&togetherjs=Jr6RuGrHS5