Fungsi PHP dan JavaScript untuk Navigasi Halaman Angka

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, peek, fn, first, previous, next, last) {
    var begin = 1,
        end = Math.ceil(count / chunk),
        s = "",
        i, min, max;
    if (end <= 1) {
        return s;
    }
    if (current <= peek + peek) {
        min = begin;
        max = Math.min(begin + peek + peek, end);
    } else if (current > end - peek - peek) {
        min = end - peek - peek;
        max = end;
    } else {
        min = current - peek;
        max = current + peek;
    }
    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, $peek, $fn, $first, $previous, $next, $last) {
    $begin = 1;
    $end = (int) ceil($count / $chunk);
    $s = "";
    if ($end <= 1) {
        return $s;
    }
    if ($current <= $peek + $peek) {
        $min = $begin;
        $max = min($begin + $peek + $peek, $end);
    } else if ($current > $end - $peek - $peek) {
        $min = $end - $peek - $peek;
        $max = $end;
    } else {
        $min = $current - $peek;
        $max = $current + $peek;
    }
    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 peek, 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, 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