[eluser]worchyld[/eluser]
Hi there, I've got a list of customers that page very well. I want to add JQuery to make it do the hardwork of paging (but it must still page with JavaScript switched off!) Also, how do you make it have that fancy ajax loading gif too? Once finished I'd like to release it, so that people can see JQuery/CI working hand-in-hand is easy.
Remove + in scripts
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>List of customers</title>
<scr+ipt type="text/javascript" src="<?=base_url()?>assets/javascript/jquery.js">
<scr+ipt type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$("p.paging a").click(function() {
// this is where I'm stuck, I don't know what I'm meant to do
// I want to feed my URL with the offset generated by CI
// I want it to get the paging result and return the results AJAX-like.
// How do I get that Fancy AJAX loading gif on here too?
$.ajax({
type: "GET",
url: "/index.php/index/",
data: "id="+$(this).prev().text(),
success: function(html){
alert("Something happened");
}
});
return false;
});
});
/* ]]> */
</scr+ipt>
<style type="text/css">
p.paging {
padding:5px;
border:1px solid #acd373;
background:#fafff3;
margin-bottom: 10px;
}
</style>
</head>
<body>
<?=$this->table->generate($data['results']); ?>
<p class="paging"><?=$this->pagination->create_links(); ?></p>
</body>
</html>
The controller is like this;
Code:
// CONTROLLER
class List_customers extends Controller {
// controller
function List_customers() {
parent::Controller();
// $this->output->enable_profiler(TRUE);
} // end function
function index() {
// Load libraries
$this->load->library('pagination');
$this->load->library('table');
$this->load->library('validation');
// Get the page offset
$offset = $this->get_page_offset();
// List all customers with paginated effect
$this->list_all($offset);
} // end function
function list_all($offset=0) {
// Load customer model
$this->load->model('Customer_list_model');
// =======================================================
// Initialize Pagination
$config['base_url'] = site_url('list_customers/index/');
$config['total_rows'] = $this->db->count_all('ci_customers');
$config['per_page'] = 10;
$num = $config['per_page'];
$config['cur_page'] = $offset;
$data['offset'] = $offset;
$this->pagination->initialize($config); // Run paging
$data['results'] = ( $this->Customer_list_model->get_customers('ci_customers', $num, $data['offset']) );
// =======================================================
// Set page variables
$this->view->set("data", $data);
$this->table->set_heading('ID', 'Name');
// =======================================================
// Load the actual page
$this->view->load('list_customers');
} // end function
// ==========================================
// Get the paging offset
function get_page_offset() {
$offset=0;
if (is_numeric($this->uri->segment(3))) {
// Handle GET variable
$offset = $this->uri->segment(3);
} else {
// Handle POST variable
if (is_numeric($this->input->post("offset"))) {
$offset = $this->input->post("offset");
} else {
$offset = 0;
} // end if
} // end if
return ($offset);
} // end function
} // end class
?>
Thanks.
