Membuat Paging dengan JQuery dan Ajax

Membuat Paging dengan JQuery dan Ajax

Pertama buat file bag.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paging jQuery - juniawan89.blogspot.com</title>
<meta name="keywords" content="juniawan89.blogspot.com" />
<meta name="description" content="juniawan89.blogspot.com" />
<script type="text/javascript" src="jquery.min.js"></script> 

<script>
function setDate(){
 
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "data-bag.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page); 
                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                    
                });
            });
  }
</script>

<style>
/* loading ajx..................  */
#loading{
                width: 100%;
                position: absolute;
                top: auto;
                left: auto;
margin-top:auto;
            }
            #container .pagination ul li.inactive,
            #container .pagination ul li.inactive:hover{
                background-color:#ededed;
                color:#bababa;
                border:1px solid #bababa;
                cursor: default;
            }
            #container .data ul li{
                list-style: none;
                font-family: verdana;
                margin: 5px 0 5px 0;
                color: #000;
                font-size: 13px;
            }

            #container .pagination{
                width: 800px;
                height: 25px;
            }
            #container .pagination ul li{
                list-style: none;
                float: left;
                border: 1px solid #006699;
                padding: 2px 6px 2px 6px;
                margin: 0 3px 0 3px;
                font-family: arial;
                font-size: 14px;
                color: #006699;
                font-weight: bold;
                background-color: #f2f2f2;
            }
            #container .pagination ul li:hover{
                color: #fff;
                background-color: #006699;
                cursor: pointer;
            }
.go_button
{
background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;
}
.total
{
float:right;font-family:arial;color:#999;
}
</style>
</head>
<body onload="setDate()">

<div id="loading"></div>
        <div id="container">
            <div class="data"></div>
            <div class="pagination"></div>
        </div>

</body>
</html>


Kedua buat file data-bag.php

<script type="text/javascript" id="js">

//========untuk style tabel=======================
$.tablesorter.addParser({
// set a unique id
id: 'grades',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
},
// set type, either numeric or text
type: 'numeric'
});

$(function() {
$("table").tablesorter({
headers: {
3: {
sorter:'grades'
}
}
});
});
</script>

</head>

<body>
<table cellspacing="1" width="100%" border="0">
   

<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 5;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"koneksi.php";
$no=0;
$query_pag_data = "SELECT * FROM barang where idKat='KAT001' order by idBrg LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) 
{
$no++;
$kode = $row[0];
$nama = $row[1];
$desc = $row[2];
$gmb = $row[3];
$harga = $row[5];
$jadi = "$ " . number_format($harga,2,',','.');
?>

<tr>
<td rowspan="5" width="180"><a href="<? echo "$gmb" ?>" class="highslide" onClick="return hs.expand(this)"><img src="<? echo "$gmb" ?>" width="150px"></a>
</td>
<td width="40">Code</td>
<td width="5">:</td>
    <td><? echo "$kode" ?></td>
  </tr>
  <tr>
    <td width="40">Name</td>
<td width="5">:</td>
    <td><? echo "$nama" ?></td>
  </tr>
  <tr>
  <td width="40">Desc</td>
<td width="5">:</td>
    <td align="justify"><? echo "$desc" ?></td>
  </tr>
   <tr>
  <td width="40">Price</td>
<td width="5">:</td>
    <td align="justify"><? echo "$jadi" ?></td>
  </tr>
   <tr>
    <td width="40"></td>
    <td width="5"></td>
    <td></td>
  </tr>

<? 
}
?>
</table>
<?

/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM barang where idKat='KAT001'";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}
?>

</body>
</html>


Jika dijalankan tampilan nya seperti berikut :



Download code lengkap
disini


Selesai...
Semoga Bermanfaat....

1 komentar untuk "Membuat Paging dengan JQuery dan Ajax"

  1. kenapa ga sekalian sama databasenya? di script di 4sharednya juga ga ada hadeh..

    BalasHapus

Posting Komentar

Pengunjung yang baik selalu memberikan masukan / komentar..