File "code.php"

Full Path: /home/analogde/www/Massage_v3_debug/datatable/02/code.php
File size: 4.94 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.7/dist/sweetalert2.all.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css"/>

</head>

<body>

<h1>My First Heading</h1>

<div class="top-panel">
    <a href="javascript:void(0);" class="btn btn-primary" onclick="addData()">Add New User</a>
</div>

<script>

<div class="modal fade" id="userDataModal" tabindex="-1" aria-labelledby="userAddEditModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="userModalLabel">Add New User</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form name="userDataFrm" id="userDataFrm">
            <div class="modal-body">
                <div class="frm-status"></div>
                <div class="mb-3">
                    <label for="userFirstName" class="form-label">First Name</label>
                    <input type="text" class="form-control" id="userFirstName" placeholder="Enter firstname">
                </div>
                <div class="mb-3">
                    <label for="userLastName" class="form-label">Last Name</label>
                    <input type="text" class="form-control" id="userLastName" placeholder="Enter lastname">
                </div>
                <div class="mb-3">
                    <label for="userEmail" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="userEmail" placeholder="Enter email">
                </div>
                <div class="form-radio">
                    <label>Gender:</label>
                    <input type="radio" name="userGender" id="userGender_1" value="Male" checked> Male 
                    &nbsp;&nbsp; 
                    <input type="radio" name="userGender" id="userGender_2" value="Female"> Female
                </div>
                <div class="mb-3">
                    <label for="userCountry" class="form-label">Country</label>
                    <input type="text" class="form-control" id="userCountry" placeholder="Enter country">
                </div>
                <div class="form-radio">
                    <label>Status:</label>
                    <input type="radio" name="userStatus" id="userStatus_1" value="1" checked> Active &nbsp;&nbsp;
                    <input type="radio" name="userStatus" id="userStatus_2" value="0"> Inactive
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="userID" value="0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="submitUserData()">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>



<table id="dataList" class="display" style="width:100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
            <th>Created</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
            <th>Created</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </tfoot>
</table>

var table = $('#dataList').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "fetchData.php",
    "columnDefs": [
        { "orderable": false, "targets": 7 }
    ]
});

$(document).ready(function(){
    // Draw the table
    table.draw();
});

function addData(){
    $('.frm-status').html('');
    $('#userModalLabel').html('Add New User');

    $('#userGender_1').prop('checked', true);
    $('#userGender_2').prop('checked', false);
    $('#userStatus_1').prop('checked', true);
    $('#userStatus_2').prop('checked', false);
    $('#userFirstName').val('');
    $('#userLastName').val('');
    $('#userEmail').val('');
    $('#userCountry').val('');
    $('#userID').val(0);
    $('#userDataModal').modal('show');
}

</script>

<p>My first paragraph.</p>

</body>
</html>