Tutorial AJAX PHP

Teknik Paging - Menampilkan record dengan AJAX PHP & bootstrap Pagination

Ajax Paging PHP - Menampilkan record dengan ajax & bootstrap pagination

Tutorial Ajax Paging PHP - Menampilkan record dengan ajax & bootstrap pagination
 
ini akan membahas bagaimana  Develindo.commembuat paging lebih dinamis dengan menerapkan AJAX PHP. Halaman pada web akan dibagi menjadi beberapa part dalam setiap tampilan memiliki batas tampilan record. Setiap tampilan akan diterapkan AJAX PHP sehingga perpindahan setiap tampilan tidak reload halaman/ refresh halaman. Maka Web anda akan semakin dinamis dan responsible.
>> Lihat Hasilnya dulu <<
Ikuti langkah-langkah berikut ini.

Buat database dengan nama praktek dan buat tabel dengan nama tb_siswa

Buat file koneksi.php

koneksi.php
 

<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');

//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="praktek";
mysql_connect($server,$user,$pass)
 or die('Koneksi Ke database Error'); //mengkoneksikan dengan server 
jika tidak akan muncul pesan error
mysql_select_db($database) or 
die('Database Tidak Ditemukan');   //mengkoneksikan dengan database jika
 tidak akan muncul pesan database tidak ada

?>

selanjutnya buat file
index.php
 

 <!DOCTYPE html>
<html>
<head>
    <title>Develindo | Ajax Paging PHP - Menampilkan record dengan ajax pagination</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap core JavaScript-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
    <br /><br />
    <div class="container" style="width:800px;">
        <h2 align="center">Ajax Paging PHP - Menampilkan record dengan ajax pagination</h2>
        <h3 align="center">Data Seluruh Siswa</h3>
        <br /><br />
        <div id="tabel_siswa">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <tr>
                        <th>NIS</th>
                        <th>NISN</th>
                        <th>Nama Lengkap</th>
                        <th>Gender</th>
                    </tr>
                    <?php
                    //panggil fungsi koneksi.php
                    include "koneksi.php";
                    $page = '';
                    if(isset($_POST["p"])){
                    $record_per_page = $_POST["p"];
                    }else{
                    $record_per_page = 5;
                    }
                    if($record_per_page=="5"){
                    $one='selected';
                    }elseif($record_per_page=="10"){
                    $two='selected';
                    }elseif($record_per_page=="50"){
                    $thre='selected';
                    }elseif($record_per_page=="100"){
                    $four='selected';
                    }
                    if(isset($_POST["page"]))
                    {
                    $page = $_POST["page"];
                    }
                    else
                    {
                    $page = 1;
                    }
                    $start_from = ($page - 1)*$record_per_page;
                    //ambil data dari tb_siswa dan lakukan perulangan dengan while
                    $ambildata=mysql_query("select*from tb_siswa order by id_siswa asc LIMIT $start_from, $record_per_page");
                    $jumlah=mysql_num_rows($ambildata);
                    while($a = mysql_fetch_array($ambildata))
                    {
                    ?>
                    <tr>
                        <td><strong><?php echo $a['id_siswa']; ?></strong></td>
                        <td><?php echo $a['nisn'];?></td>
                        <td><?php echo $a['nama_siswa'];?></td>
                        <td><?php echo $a['gender_siswa'];?></td>
                    </tr>
                    <?php
                    }
                    ?>
                </table>
            </div>
            <div class="col-lg-12">
                <div class="col-lg-9 text-left">
                    <ul class="pagination pagination-sm">
                        <?php
                        $page_query = "SELECT * FROM tb_siswa order by id_siswa asc";
                        $page_result = mysql_query($page_query);
                        $total_records = mysql_num_rows($page_result);
                        $total_pages = ceil($total_records/$record_per_page);
                        if ( $page > 1 ) {
                        $link = $page-1;
                        $prev = "
                       
 <li><a href='javascript:void(0);' class='pagination_link' 
id='".$link.",".$record_per_page."'> Prev</a></li>";
                        } else {
                        $prev = "
                        <li><a href='javascript:void(0);'>Prev</a></li>";
                        }
                        $nmr='';
                        for($i=1; $i<=$total_pages; $i++)
                        {
                        if ( $i == $page ) {
                        $nmr .= "
                       
 <li class='active'><a href='javascript:void(0);' 
class='pagination_link' id='".$i."'> $i</a></li>";
                        } else {
                        $nmr .="
                       
 <li><a href='javascript:void(0);' class='pagination_link' 
id='".$i.",".$record_per_page."'>".$i."</a></li>";
                        }
                        }
                        if ( $page < $total_pages ) {
                        $link = $page + 1;
                        $next = "
                       
 <li><a href='javascript:void(0);' class='pagination_link' 
id='".$link.",".$record_per_page."'> Next</a></li>";
                        } else {
                        $next = "
                        <li><a href='javascript:void(0);'>Next</a></li>";
                        }
                        echo $prev.$nmr.$next;
                        ?>
                    </ul>

                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                       
 <span class="text-muted">Tampil <?php echo $jumlah;?> Dari 
<?php echo $total_records;?></span>
                        <select class="form-control input-sm mb-10" style="width:70px;" id="location">
                            <?php
                            echo "
                            <option value='5' $one>5</option>
                            <option value='10' $two>10</option>
                            <option value='50' $thre>50</option>
                            <option value='100' $four>100</option>";?>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
<script>
$(document).ready(function () {
/*show record*/
$(document).on('change', '#location', function () {
        var p = this.value;
        $.ajax({
            url: "paging.php",
            method: "POST",
            data: { p: p },
            success: function (data) {
                $('#tabel_siswa').html(data);

            }
        })
    });

    /*Pegination*/

    $(document).on('click', '.pagination_link', function () {
        var mode = this.id.split(',');
        var page = mode[0];
        var p = mode[1];
        $.ajax({
            url: "paging.php",
            method: "POST",
            data: { page: page, p: p },
            success: function (data) {
                $('#tabel_siswa').html(data);

            }
        })
    });
});
</script>


Simpan dengan nama index.php dan simpan difolder yang telah anda buat.

selanjutnya buat file

paging.php
 

<?php
error_reporting(0);
include "koneksi.php";
$page = '';
$output = '';
if(isset($_POST["p"]))
{
  $record_per_page = $_POST["p"];
}
else
{
  $record_per_page = 5;
}
if($record_per_page=="5"){
 $one='selected';
}elseif($record_per_page=="10"){
 $two='selected';
}elseif($record_per_page=="50"){
 $thre='selected';
}
elseif($record_per_page=="100"){
 $four='selected';
}

if(isset($_POST["page"]))
{
  $page = $_POST["page"];
}
else
{
  $page = 1;
}
$start_from = ($page - 1)*$record_per_page;
$query = "SELECT * FROM tb_siswa order by id_siswa asc LIMIT $start_from, $record_per_page";
$result = mysql_query($query);
$jumlah=mysql_num_rows($result);
$output .='<div class="table-responsive">
                     <table class="table table-bordered">
                          <tr>
                               <th>NIS</th>
                               <th>NISN</th>
                               <th>Nama Lengkap</th>
                               <th>Gender</th>
                          </tr>';

            while($row = mysql_fetch_array($result))
            {
            $output .= '
            <tr>
                <td><strong>' . $row["id_siswa"] . '</strong></td>
                <td>' . $row["nisn"] . '</td>
                <td>' . $row["nama_siswa"] . '</td>
                <td>' . $row["gender_siswa"] . '</td>
            </tr>
            ';
            }
            $output .= '</table>
                </div>';
$output .= '<div class="col-lg-12">
    <div class="col-lg-9 text-left">
        <ul class="pagination pagination-sm">
            ';
            $page_query = "SELECT * FROM tb_siswa order by id_siswa asc";
            $page_result = mysql_query($page_query);
            $total_records = mysql_num_rows($page_result);
            $total_pages = ceil($total_records/$record_per_page);
            if ( $page > 1 ) {
            $link = $page-1;
            $prev = "
           
 <li><a href='javascript:void(0);' class='pagination_link' 
id='".$link.",".$record_per_page."'> Prev</a></li>";
            } else {
            $prev = "
            <li><a href='javascript:void(0);'>Prev</a></li>";
            }
            $nmr='';
            for($i=1; $i<=$total_pages; $i++)
            {
            if ( $i == $page ) {
            $nmr .= "
           
 <li class='active'><a href='javascript:void(0);' 
class='pagination_link' id='".$i.",".$record_per_page."'> 
$i</a></li>";
            } else {
            $nmr .="
           
 <li><a href='javascript:void(0);' class='pagination_link' 
id='".$i.",".$record_per_page."'>".$i."</a></li>";
            }
            }
            if ( $page < $total_pages ) {
            $link = $page + 1;
            $next = "
           
 <li><a href='javascript:void(0);' class='pagination_link' 
id='".$link.",".$record_per_page."'> Next</a></li>";
            } else {
            $next = "
            <li><a href='javascript:void(0);'>Next</a></li>";
            }
            $output .=$prev.$nmr.$next;
            $output .= '
        </ul>
    </div>
    <div class="col-lg-3">
        <div class="form-group">
            <span class="text-muted">Tampil ' .$jumlah. ' Dari ' .$total_records. '</span>
            <select class="form-control input-sm mb-10" style="width:70px;" id="location">
                <option value="5" ' .$one. '>5</option>
                <option value="10" ' .$two. '>10</option>
                <option value="50" ' .$thre. '>50</option>
                <option value="100" ' .$four. '>100</option>
            </select>
        </div>
    </div>
</div>';

echo $output;
?>


paging.php merupakan script untuk menampilkan halaman berikutnya dengan membagi setiap tampilan menjadi 5 record.

Silahkan download source code berikut ini. Terimakasih

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website