Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Fungsi PHP dan JavaScript untuk Navigasi Halaman Angka

Pagination

Berikut ini adalah fungsi navigasi halaman angka yang paling standar dan paling sesuai untuk diterapkan pada semua kasus. Saya sediakan dalam bahasa JavaScript dan PHP, karena menurut Saya tampilan navigasi ini sangat sederhana namun sudah mencakup semua fitur yang ada. Yaitu fitur navigasi halaman Awal, Akhir, Berikutnya, Sebelumnya, dan navigasi halaman angka yang memungkinkan kita untuk melompati beberapa halaman sekaligus.

JavaScript

function pager(current, count, chunk, kin, fn, first, previous, next, last) {
    var begin = 1,
        end = Math.ceil(count / chunk),
        s = "",
        i, min, max;
    if (end <= 1) {
        return s;
    }
    if (current <= kin + kin) {
        min = begin;
        max = Math.min(begin + kin + kin, end);
    } else if (current > end - kin - kin) {
        min = end - kin - kin;
        max = end;
    } else {
        min = current - kin;
        max = current + kin;
    }
    if (previous) {
        s = '<span>';
        if (current === begin) {
            s += '<b title="' + previous + '">' + previous + '</b>';
        } else {
            s += '<a href="' + fn(current - 1) + '" title="' + previous + '" rel="prev">' + previous + '</a>';
        }
        s += '</span> ';
    }
    if (first && last) {
        s += '<span>';
        if (min > begin) {
            s += '<a href="' + fn(begin) + '" title="' + first + '" rel="prev">' + begin + '</a>';
            if (min > begin + 1) {
                s += ' <span>&hellip;</span>';
            }
        }
        for (i = min; i <= max; ++i) {
            if (current === i) {
                s += ' <b title="' + i + '">' + i + '</b>';
            } else {
                s += ' <a href="' + fn(i) + '" title="' + i + '" rel="' + (current >= i ? 'prev' : 'next') + '">' + i + '</a>';
            }
        }
        if (max < end) {
            if (max < end - 1) {
                s += ' <span>&hellip;</span>';
            }
            s += ' <a href="' + fn(end) + '" title="' + last + '" rel="next">' + end + '</a>';
        }
        s += '</span>';
    }
    if (next) {
        s += ' <span>';
        if (current === end) {
            s += '<b title="' + next + '">' + next + '</b>';
        } else {
            s += '<a href="' + fn(current + 1) + '" title="' + next + '" rel="next">' + next + '</a>';
        }
        s += '</span>';
    }
    return s;
}

PHP

function pager($current, $count, $chunk, $kin, $fn, $first, $previous, $next, $last) {
    $begin = 1;
    $end = (int) ceil($count / $chunk);
    $s = "";
    if ($end <= 1) {
        return $s;
    }
    if ($current <= $kin + $kin) {
        $min = $begin;
        $max = min($begin + $kin + $kin, $end);
    } else if ($current > $end - $kin - $kin) {
        $min = $end - $kin - $kin;
        $max = $end;
    } else {
        $min = $current - $kin;
        $max = $current + $kin;
    }
    if ($previous) {
        $s = '<span>';
        if ($current === $begin) {
            $s .= '<b title="' . $previous . '">' . $previous . '</b>';
        } else {
            $s .= '<a href="' . call_user_func($fn, $current - 1) . '" title="' . $previous . '" rel="prev">' . $previous . '</a>';
        }
        $s .= '</span> ';
    }
    if ($first && $last) {
        $s .= '<span>';
        if ($min > $begin) {
            $s .= '<a href="' . call_user_func($fn, $begin) . '" title="' . $first . '" rel="prev">' . $begin . '</a>';
            if ($min > $begin + 1) {
                $s .= ' <span>&hellip;</span>';
            }
        }
        for ($i = $min; $i <= $max; ++$i) {
            if ($current === $i) {
                $s .= ' <b title="' . $i . '">' . $i . '</b>';
            } else {
                $s .= ' <a href="' . call_user_func($fn, $i) . '" title="' . $i . '" rel="' . ($current >= $i ? 'prev' : 'next') . '">' . $i . '</a>';
            }
        }
        if ($max < $end) {
            if ($max < $end - 1) {
                $s .= ' <span>&hellip;</span>';
            }
            $s .= ' <a href="' . call_user_func($fn, $end) . '" title="' . $last . '" rel="next">' . $end . '</a>';
        }
        $s .= '</span>';
    }
    if ($next) {
        $s .= ' <span>';
        if ($current === $end) {
            $s .= '<b title="' . $next . '">' . $next . '</b>';
        } else {
            $s .= '<a href="' . call_user_func($fn, $current + 1) . '" title="' . $next . '" rel="next">' . $next . '</a>';
        }
        $s .= '</span>';
    }
    return $s;
}

Tentukan nomor halaman saat ini (dimulai dari angka 1), pada current, jumlah total data pada count, jumlah data yang ingin ditampilkan per halaman pada chunk, jumlah navigasi angka yang perlu ditampilkan sebelum dan sesudah angka halaman yang aktif pada kin, fungsi untuk membuat tautan pada fn dan teks untuk masing-masing tautan navigasi pada first, previous, next dan last.

Contoh

JavaScript

container.innerHTML = '<nav>' + pager(1, 500, 10, 2, function(i) {
    return i === 1 ? '/article' : '/article/' + i;
}, 'Awal', 'Sebelumya', 'Berikutnya', 'Akhir') + '</nav>';

PHP

echo '<nav>' . pager(1, 500, 10, 2, function($i) {
    return $i === 1 ? '/article' : '/article/' . $i;
}, 'Awal', 'Sebelumya', 'Berikutnya', 'Akhir') . '</nav>';

Referensi: StackOverflow Like Pagination

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 1 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!