javascript - Pagination manipulated with jquery on CI working, but the link is updated -
i have 1 page on html, named view_closing.php. in view, there 1 table integrated 1 pagination. goal is, how can make table move record without refreshing page.so, still on 1 address, :http://localhost/tresnamuda/control_closing/
i googling while, , decide make 2 view, 1 view page, , 1 view table requested ajax.
this main page :
<div class="row-fluid sortable" id="isi"> <div class="box span12"> <div class="box-header"> <h2><i class="halflings-icon align-justify"></i><span class="break"></span>data request</h2> <div class="box-icon"> <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a> </div> </div> <div class="box-content" id="things_table"> <?php $this->load->view('view_closing_table'); ?> </div> </div> and file 2 named view_closing table
<table class="table table-bordered table-striped table-condensed" id="table1"> <thead> <tr> <th>no. </th> <th>no request</th> <th>keluhan</th> <th>status</th> <th>action</th> </tr> </thead> <tbody> <?php $no = 1; foreach ($data_request $data) { ?> <tr> <td class="center"><?php echo $no++ . ". "; ?> </td> <td class="sorting1" id='no_request' data-id-reseh="<?php echo $data['id_request']; ?>"><?php echo $data['kode_kantor'] . '/' . $data['kode_departement'] . '/' . date('m', strtotime($data['bulan'])) . '/' . $data['id_request']; ?></td> <td class="center" id="description"><?php echo $data['keluhan']; ?></td> <!-- update --> <td class="center"><a href="#" id="status" name="status" class="linkstatus" ><span id="st" class="label label-important"><?php echo $data['status_request']; ?> </span></a></td> <!-- action-action --> <td class="center" width="10px"> <a class="btn btn-success" > <i class="halflings-icon white print" id="print"></i> print </a> </td> </tr> <?php } ?> </tbody>
to make pagination call using ajax, create 1 function using call page , 1 antoher function call view_table. main pagination on controller :
public function index() { $this->show(); } public function show() { if ($this->session->userdata('logged_in') != "logging") { redirect('control_auth'); } else { $nama = $this->session->userdata('nama'); $start_row = $this->uri->segment(3); $per_page = 3; if (trim($start_row) == '') { $start_row = 0; }; $total_rows = $this->model_request->countperuser($this->session->userdata('nama')); $this->load->library('pagination'); $config['base_url'] = base_url() . 'control_closing/ajax_get_things_table'; //call using ajax $config['total_rows'] = $total_rows; $config['per_page'] = $per_page; $config['full_tag_open'] = '<div class="pagination pagination-centered"><ul>'; $config['full_tag_close'] = '</ul></div><!--pagination-->'; $config['first_link'] = true; $config['last_link'] = true; $config['first_tag_open'] = '<li>'; $config['first_tag_close'] = '</li>'; $config['prev_link'] = 'prev'; $config['prev_tag_open'] = '<li class="prev">'; $config['prev_tag_close'] = '</li>'; $config['next_link'] = 'next'; $config['next_tag_open'] = '<li>'; $config['next_tag_close'] = '</li>'; $config['last_tag_open'] = '<li>'; $config['last_tag_close'] = '</li>'; $config['cur_tag_open'] = '<li class="active"><a href="'.base_url().'control_closing/ajax_get_things_table/">'; $config['cur_tag_close'] = '</a></li>'; $config['num_tag_open'] = '<li>'; $config['num_tag_close'] = '</li>'; $this->pagination->initialize($config); $data['pagination'] = $this->pagination->create_links(); $data['pengguna'] = $this->model_user->get_username($this->session->userdata('username')); $data['data_request'] = $this->model_request->selectrequestperuser($nama, $per_page, $start_row); $this->load->view('view_closing', $data); // load page } } now, create function calling table refreshing bassed on pagintaion.
the code :
public function ajax_get_things_table() { if ($this->session->userdata('logged_in') != "logging") { redirect('control_auth'); } else { $nama = $this->session->userdata('nama'); $start_row = $this->uri->segment(3); $per_page = 3; if (trim($start_row) == '') { $start_row = 0; }; $total_rows = $this->model_request->countperuser($this->session->userdata('nama')); $this->load->library('pagination'); $config['base_url'] = base_url() . 'control_closing/ajax_get_things_table/'; $config['total_rows'] = $total_rows; $config['per_page'] = $per_page; $config['full_tag_open'] = '<div class="pagination pagination-centered"><ul>'; $config['full_tag_close'] = '</ul></div><!--pagination-->'; $config['first_link'] = false; $config['last_link'] = false; $config['first_tag_open'] = '<li>'; $config['first_tag_close'] = '</li>'; $config['prev_link'] = 'prev'; $config['prev_tag_open'] = '<li class="prev">'; $config['prev_tag_close'] = '</li>'; $config['next_link'] = 'next'; $config['next_tag_open'] = '<li>'; $config['next_tag_close'] = '</li>'; $config['last_tag_open'] = '<li>'; $config['last_tag_close'] = '</li>'; $config['cur_tag_open'] = '<li class="active"><a href="'.base_url().'control_closing/ajax_get_things_table/">'; $config['cur_tag_close'] = '</a></li>'; $config['num_tag_open'] = '<li>'; $config['num_tag_close'] = '</li>'; $this->pagination->initialize($config); $data['pagination'] = $this->pagination->create_links(); $data['nama'] = $this->session->userdata('nama'); $data['level'] = $this->session->userdata('level'); $data['pengguna'] = $this->model_user->get_username($this->session->userdata('username')); $data['data_request'] = $this->model_request->selectrequestperuser($nama, $per_page, $start_row); $_html = $this->load->view('view_closing_table', $data, true); //just laod table echo $_html; } } i manipulated pagination on ci using jquery. code written in 1 view named view_closing :
$('.pagination ul li a').live("click", function() { var this_url = $(this).attr("href"); $.post(this_url, {}, function(data) { $('#things_table').html(data); }); return false; }); and, thank god, success. : 
now, new problem rise : in action field named "belum selesai" not working after pagination work. know, because ajax calling http://localhost/tresnamuda/control_closing/ajax_get_things_table/4. in link button href ="#" . link not working coz adress :http://localhost/tresnamuda/control_closing/ajax_get_things_table/4/#. link on jquery looked :
$(".linkstatus").click(function() { var $row = $(this).closest("tr"); // find row var text = $row.find("#no_request").text(); // find text var status = $row.find("#status").text(); // find text var idtext = text.substring(10); var c = confirm("apakah anda akan menutup request ini ? "); if (c === true) { $.ajax({ url: '<?php echo base_url() . 'control_closing/closingrequest/' ?>', type: 'post', data: {id: idtext}, success: function(obj) { if (obj === "true") { $('#isi').unblock(); location.reload(); } } }); } else if (c === false) { $('#isi').unblock(); } });
the link working if address : http://localhost/tresnamuda/control_closing/
the problem you're using ajax load page content, trying attach event it, you're event trying attach before content loaded. when page gets $(".linkstatus").click(function() { scans page elements class of linkstatus, because content hasn't loaded yet (the ajax still loading it) there's no element class name, no events set up.
what need either attach event exists, document, or attach event after page has loaded.
either of these examples should solve issue:
attach event existing element
you need change
$(".linkstatus").click(function() { to
$(document).on('click', '.linkstatus', function() { attach event after ajax has run
first need wrap event handler in function, can call it.
function start() { $(".linkstatus").click(function() { //... code run when linkstatus clicked. }); } and in ajax success function you're loading table, @ end of function add call start() attach event.
Comments
Post a Comment