EVOLUTION-NINJA

Edit File: projectList.php

<?php echo view('includes/sidebar'); ?>

<h1 class="crt-pjt">
                Product List
            </h1>

</div>

<thead>

<tr>

<th>Sl No</th>
                        
                        <th>Product Type</th>

<th>Model</th>

<th>RC Price</th>

<th>Basic Price</th>

<th>Action</th>

</tr>

</thead>

</table>

</div>

</section>

let table;

// ==========================================
// FETCH PRODUCTS
// ==========================================

function fetchProducts(table)
{
    $.ajax({

url: "<?= base_url('products/get') ?>",

type: "GET",

dataType: "json",

success: function(data){

// CLEAR OLD ROWS
            table.clear();

// NO DATA
            if(data.length === 0){

table.draw();
                return;
            }

// LOOP PRODUCTS
            data.forEach(function(p, index){

table.row.add([

index + 1,
                    
                    p.product_category,

p.model_name,

p.rc_price,

p.basic_price,

p.ndp,

p.gst_percent,

`
                    <div style="display:flex; gap:5px;">

Edit

</button>

Delete

</button>

</div>
                    `
                ]);
            });

// DRAW TABLE
            table.draw();

}

});
}

// ==========================================
// DOCUMENT READY
// ==========================================

$(document).ready(function () {

table = $('#productTable').DataTable({

processing: true,

pageLength: 10,

lengthMenu: [5, 10, 25, 50],

ordering: true,

searching: true,

info: true,

scrollX: true,

responsive: false,

autoWidth: false

});

fetchProducts(table);

});

// ==========================================
// EDIT PRODUCT
// ==========================================

function editProduct(id)
{
    window.location.href =
    "<?= base_url('products/edit/') ?>" + id;
}

// ==========================================
// DELETE PRODUCT
// ==========================================

function deleteProduct(id)
{
    Swal.fire({

title: 'Are you sure?',

text: "You want to delete this product!",

icon: 'warning',

showCancelButton: true,

confirmButtonText: 'Yes, delete it!'

}).then((result) => {

if (result.isConfirmed) {

$.ajax({

url: "<?= base_url('products/delete') ?>",

type: "POST",

data: { id: id },

dataType: "json",

success: function(res) {

if (res.status == 1) {

Swal.fire(
                            'Deleted!',
                            res.message,
                            'success'
                        );

// REFRESH TABLE
                        fetchProducts(table);

} else {

Swal.fire(
                            'Error!',
                            'Delete failed',
                            'error'
                        );
                    }
                }

});
        }
    });
}

</script>

<?php echo view('includes/footer'); ?>

<style>

/* =========================================
TABLE RESPONSIVE
========================================= */

.table-responsive{

overflow-x:auto;
}

/* =========================================
DATATABLE
========================================= */

#productTable{

width:100% !important;
}

/* =========================================
TABLE HEADER
========================================= */

table.dataTable thead th{

background:#f2f2f2;

color:#000;

text-align:center;

font-size:16px;

padding:10px;
}

/* =========================================
TABLE BODY
========================================= */

table.dataTable tbody td{

text-align:center;

padding:10px;

vertical-align:middle;
}

/* =========================================
HOVER
========================================= */

table.dataTable tbody tr:hover{

background:#f9f9f9;
}

/* =========================================
BUTTONS
========================================= */

.btn{

border:none;

padding:5px 12px;

border-radius:5px;

font-size:14px;
}

.btn-primary{

background:#0d6efd;

color:#fff;
}

.btn-danger{

background:#dc3545;

color:#fff;
}

/* =========================================
SEARCH BOX
========================================= */

.dataTables_filter input{

border:1px solid #ccc;

border-radius:5px;

padding:5px 10px;
}

/* =========================================
PAGINATION
========================================= */

.dataTables_paginate .paginate_button{

padding:3px 10px !important;

margin:2px !important;
}

</style>