Pagination sendiri merupakan page or halaman yang membuat tampilan situs lebih user friendly, untuk menampilkan data dalam beberapa halaman.
Ok langsung saja, karena kita akan menampilkan data dengan pagination maka kita perlu data yang ada di databse, saya sudah persiapkan sama seakan-akan data yang diberikan di tutorial datatable server side di postingan :
membuat datatable server side ajax CodeIgniter Bootstrap 4
Biasa silahkan konfigurasi dasar codeIgniter nya seakan-akan base_url, route, autoload, library, dan lain-lain.
konfigurasi dasar CodeIgniter
Setelah konfigurasi semua simpulan mampu kita buat modelnya terlebih dahulu, saya buat nama dengan mdata.php dengan code sebagai berikut :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Mdata extends CI_Model
public function count_all($table)
$query = $this->db->get($table);
return $query->num_rows();
public function pagenation($table,$limit,$offset)
$this->db->select("*");
$this->db->from($table);
$this->db->limit($limit,$offset);
$query = $this->db->get();
return $query->result();
ok berikut code dari controller dengan dua function sebagai berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller
function __construct()
parent::__construct();
$this->load->library('pdf');
public function page()
//passing data function onload javascript
$isi['onload'] = 'onload="load_data(1)"';
$isi['title'] = "Pagination";
$this->load->view('full',$isi);
public function pagedata()
$config = array();
$config["base_url"] = base_url()."home/page/";
$config["total_rows"] = $this->mdata->count_all('tbmhs');
$config["per_page"] = 3;
$config["uri_segment"] = 3;
$config['attributes'] = array('class' => 'page-link');
$config["use_page_numbers"] = TRUE;
$config["full_tag_open"] = '<ul class="pagination">';
$config["full_tag_close"] = '</ul>';
$config["first_tag_open"] = '<li class="page-item">';
$config["first_tag_close"] = '</li>';
$config["last_tag_open"] = '<li class="page-item">';
$config["last_tag_close"] = '</li>';
$config['next_link'] = 'Next';
$config["next_tag_open"] = '<li class="page-item">' ;
$config["next_tag_close"] = '</li>';
$config['prev_link'] = 'Previous';
$config["prev_tag_open"] = '<li>';
$config["prev_tag_close"] = '</li>';
$config["cur_tag_open"] = '<li class="page-item active"><a class="page-link" href="#">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
//$config['display_pages'] = FALSE;
$config["last_link"] = "Last";
$config["first_link"] = "First";
$config['num_links'] =2;
$this->pagination->initialize($config);
$page = $this->uri->segment(3);
$start = ($page -1) * $config["per_page"];
$data = array();
$ambil = $this->mdata->pagenation('tbmhs',$config["per_page"], $start);
foreach ($ambil as $row)
$sub_array = array();
$sub_array = '
<div class="p-2">
<div class="card">
<div class="card-header">'.$row->nim.'</div>
<div class="card-body">'.$row->nama.'</div>
</div>
</div>';
$data[] = $sub_array;
$output = array (
'list_link' => $this->pagination->create_links(),
'list_nama' => $data
);
echo json_encode($output);
dan untuk tampilan di code view dengan nama full.php adalah sebagai berikut : <!doctype html>
<html lang="en">
<head>
<title><?php echo $title;?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css"/>
<noscript>
<style>htmldisplay:none;</style>
Sorry, your browser does not support JavaScript!
</noscript>
</head>
<body <?php if(isset($onload)) echo $onload;?>>
<nav class="navbar navbar-expand-sm bg-light mb-5">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>">Home</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/content">Data</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/summer">WYSIWYG Summernote</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/page">Pagination</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/crop">Cropper</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/label">Label</a></li>
</ul>
</nav>
<div class="container">
<div class="float-right" id="pagination_link"></div>
<div class="d-flex" id="content">
</div>
</div>
<!-- Javascripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="<?php echo base_url();?>asset/bootbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<script src="<?php echo base_url();?>asset/custom.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
</body>
</html>
Dan untuk code terakhir ialah code file js yaitu dengan nama custom.js
yaitu sebagai berikut :
Silahkan coba di run kalau done maka akan tampil sebagai berikut :
Untuk file demo Tutorial membuat pagination Bootstrap 4 ajax CodeIgniter
dan file download Tutorial menciptakan pagination Bootstrap 4 ajax CodeIgniter
demo video
Jika ada pertanyaan silahkan tinggalkan di kolom komentar.
trima kasih sudah berkunjung
happy coding.
pass : serhamo.blogspot.com
yaitu sebagai berikut :
function load_data(page)
$.ajax(
url:"pagedata/"+page,
method:"GET",
dataType:"json",
success:function(data)
$("#content")(data.list_nama);
$("#pagination_link")(data.list_link);
);
$(document).on("click", ".pagination li a", function(event)
event.preventDefault();
var page = $(this).data("ci-pagination-page");
load_data(page);
);
Silahkan coba di run kalau done maka akan tampil sebagai berikut :
 |
| Tutorial menciptakan pagination Bootstrap 4 ajax CodeIgniter |
Untuk file demo Tutorial membuat pagination Bootstrap 4 ajax CodeIgniter
dan file download Tutorial menciptakan pagination Bootstrap 4 ajax CodeIgniter
demo video
Jika ada pertanyaan silahkan tinggalkan di kolom komentar.
trima kasih sudah berkunjung
happy coding.
pass : serhamo.blogspot.com
Post a Comment