Mempercantik Pagination Codeigniter dengan Bootstrap Twitter

Kalau kita menggunakan Framework Codeigniter (CI) dan membuat pagination, maka tampilan pagination nya sangat standart walaupun tablenya udah pake css yang sangat cantik.  tetep paginationnya dilihat tidak friendly. nah supaya lebih elok dipandang paginationnya maka kita tambahkan tag-tag bootstrap pada config pagination CI. *asumsi anda sudah tahu cara pakai Codeigniter dan Bootstrap*.

tambahkan kode dibawah ini di atas code ini
$this->pagination->initialize($config);

        $config['full_tag_open'] = '<div class="pagination"><ul>';
        $config['full_tag_close'] = '</ul></div>';

        $config['first_link'] = '&laquo; First';
        $config['first_tag_open'] = '<li class="prev page">';
        $config['first_tag_close'] = '</li>';

        $config['last_link'] = 'Last &raquo;';
        $config['last_tag_open'] = '<li class="next page">';
        $config['last_tag_close'] = '</li>';

        $config['next_link'] = 'Next &rarr;';
        $config['next_tag_open'] = '<li class="next page">';
        $config['next_tag_close'] = '</li>';

        $config['prev_link'] = '&larr; Previous';
        $config['prev_tag_open'] = '<li class="prev page">';
        $config['prev_tag_close'] = '</li>';

        $config['cur_tag_open'] = '<li class="active"><a href="">';
        $config['cur_tag_close'] = '</a></li>';

        $config['num_tag_open'] = '<li class="page">';
        $config['num_tag_close'] = '</li>';

lihatlah dibawah ini ada tampilan pagination standart dari CI :

paginationci

 

dan dibawah ini adalah tampilan setelah dipercantik dengan bootstrap :

paginationbootstrap

Selamat mencoba.😀

Sumber : http://stackoverflow.com/questions/12164114/codeigniter-bootstrap-pagination

11 Komentar (+add yours?)

  1. Prima
    Feb 07, 2013 @ 22:25:51

    Cara nyimpen bootstarp nya gimana Om?

    Balas

  2. Gunves Xco
    Nov 21, 2013 @ 12:21:53

    css bootstrapnya g ke load di paginationya aja . . jd hasilnya :
    – 1
    – 2
    – 3
    next ->

    knp y . . ?

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: