<!DOCTYPE html>
<html lang=”en”>
<head>
<title>AJAX Pagination in Codeigniter</title>
<meta charset=”utf-8″>
</head>
<body>
<!– Posts Listing –>
<table id=’postsTable’ border=’1′ width=’100%’ style=’border-collapse: collapse;’>
<thead>
<tr>
<th>SrNo</th>
<th>Title</th>
<th>Desription</th>
<th>URL</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!– Pagination –>
<div id=’pagination’></div>
<!– Script –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script type=’text/javascript’>
$(document).ready(function(){
// Detect pagination click
$(‘#pagination’).on(‘click’,’a’,function(e){
e.preventDefault();
var page_no = $(this).attr(‘data-ci-pagination-page’);
loadPagination(page_no);
});
loadPagination(0);
// Load pagination
function loadPagination(page_no){
$.ajax({
url: ‘<?php base_url()l ?>/Post/loadPosts/’+page_no,
type: ‘get’,
dataType: ‘json’,
success: function(response){
$(‘#pagination’).html(response.pagination);
createTable(response.result,response.row);
}
});
}
// Create table list
function createTable(result,SrNo){
SrNo = Number(SrNo);
$(‘#postsTable tbody’).empty();
for(index in result){
var id = result[index].id;
var title = result[index].title;
var description = result[index].body;
description = description.substr(0, 30) + ” …”;
var url = result[index].url;
SrNo+=1;
var tr = “<tr>”;
tr += “<td>”+ SrNo +”</td>”;
tr += “<td><a href='”+ url +”‘ target=’_blank’ >”+ title +”</a></td>”;
tr += “<td>”+ description +”</td>”;
tr += “</tr>”;
$(‘#postsTable tbody’).append(tr);
}
}
});
</script>
</body>
</html>