php

<?php

require 'data_koneksi.php';

$sqli = "SELECT * FROM data";
$query = $conn->query($sqli);
$result = $query->fetch_assoc();

$dataPerhalaman = 5;
$jumlahData = count($result);
$jumlahPageHalaman = ceil($jumlahData / $dataPerhalaman);

?>

<!DOCTYPE html>
<html>
<head>
    <title>New AJAX</title>

<!-- boostrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>

<!-- jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- sweet alert 1 -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


<style type="text/css">

 #loader {

    position: fixed;
    bottom: 59.8vh;
    left: 73vh;
    z-index: 1;
    display: none;;

 }

 #loader img{

    width: 60px;
    height: 60px;
 }


</style>


</head>
<body>

<div id="dataTable">
<div class="row ml-5">
<div class="col-lg-8">
<div class="card">
<div class="card-header bg-white">
<h5 class="text-primary"> Data List Table <strong class="offset-lg-6"> Author:@restuvh </strong> </h5>
</div>
<div class="card-content">
<div class="card-body">
<div class="table-responsive">
    <table class="table table-dark table-striped table-bordered text-center">
        <thead>
        <tr>
            <th>Id</th>
            <th>Nama</th>
            <th>Gambar</th>
            <th>Status</th>
            <th>Perbarui</th>
            <th>Hapus</th>
        </tr>
        </thead>
        <tbody id="dataTableBody">


        </tbody>
        </table>

                <ul class="pagination">

                <?php for ($i = 1;  $i <= $jumlahPageHalaman; $i++) : ?>
                <?php if ($i == 1) : ?>

                <li class="page-item">

                <a class="page-link active" href="javascript:void(0);"
                id="page" onclick="pageData('<?php echo $i; ?>')"> <?php echo $i; ?></a>

                </li>

                </ul>

                <?php endif; ?>
                <?php endfor; ?>

                            </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  </body>
</html>

<!-- sweet alert  -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    tampilkanData();

}); //end event updateData


}); //end call jquery


// pagenation data
    function pageData(){

    var dataPage = $("#page");
    var tablePage = '';

    $.ajax({

        url: 'http://localhost/CRUD_AJAX_NEW/data_pagenation.php',
        type: 'GET',
        statusCode: {

            404: function() {

                alert('ajax error detected');
            }

        },
        data: {

            'pageData': dataPage,
            'pageData': tablePage
        },

        success: function(data) {

            $("#dataTableBody").html(data);

            tampilkanData(data);

        },

    }); //end call ajax

}; //end event pagenation data


</script>