Generic placeholder image

Pagination codeigniter

Ditanyakan pada tanggal 20 February 2019 oleh Dzaki Fadhlurrohman

Jadi gini mas, pagination saya sudah berfungsi dengan baik dengan styling bootstrap, nah tapi kan defaultnya kita itu harus nge-klik di anchor nya baru pindah, kalo di background nya belum bisa jadi kaya hover biasa.

Pas saya cari tag <a> di $config-nya ngga ada, pertanyaan inti, bagaimana saya bisa hanya dengan menghoverkan ke pagination langsung pindah, tanpa harus ke anchor nya

Jika masih pertanyaan saya masih belum jelas, bisa ditanyakan ulang :)

Terimakasih.

https://pastebin.com/4vzZrA3a

1 JAWABAN

Generic placeholder image
Ahmad Oriza menjawab pada tanggal 21 February 2019

Sepertinya kalau mau full background click gak bisa pakai settingan seperti itu. Custom paging config CI tidak bisa menyentuh anchor paging dari Codeigniter.

Mungkin ada cara lain, yaitu membuat style paging sendiri. Ikuti langkah berikut jika tertarik :

  1. Modif Pagination

Hapus custom paging milik mas, dan harusnya jadi seperti ini saja :

public function index($offset = 0)
{
    $data['footer'] = $this->MA_model->get_footer(1);

    $config['base_url'] = site_url('kumpulan-artikel'); //site url
    $config['total_rows'] = $this->db->count_all_results('blog_content'); //total row
    $config['per_page'] = 6; 
    $config["uri_segment"] = 2;  // uri parameter

    $this->pagination->initialize($config);
    $data['article'] = $this->Article_model->get_article_pagination($config["per_page"], $offset);           
    $data['pagination'] = $this->pagination->create_links();
    $this->template->load('mainpage/template', 'mainpage/blog_list', $data);
}

Jika ada error harap modifikasi lagi, saya gak tahu persis kode milik mas, intinya silahkan hapus custom config pagingnya. Bikin standard aja.

  1. Modif View

Panggil pagination lalu apit oleh sebuah div seperti ini :

<!-- Bungkus dalam div class custom-pagination -->
<div class="custom-pagination">
 <?php echo $pagination;?>
</div>
  1. Terakhir, Sentuhan CSS

Bikin custom style pagination. Taruh script ini di header css, atau di file milik mas, intinya terapkan css ini.

.custom-pagination{
            margin-top:20px;
        }
        .custom-pagination a{
            background:#444;
            color:#FFF;
            padding:10px;
        }
        .custom-pagination a:hover{
            background:#444;
            color:#FFF;
            padding:10px;
            text-decoration: none;
        }
        .custom-pagination strong{
            background:#DEDEDE;
            color:#444;
            padding:10px;
        }

Kalau kurang bagus, bisa modif dengan selera sendiri. Kalau mau kaya bootstrap coba minta tolong teman yang jago css buat niru style bootstrap.

Hasilnya entar kaya gini :

Paging tersebut sudah full background klik, jadi gak perlu klik anchor link lagi buat pindah halaman.

Comment ..

Widih work bang, makasih yak :)

Dikomentari pada tanggal 21 February 2019 oleh Dzaki Fadhlurrohman