在CI工作时使用jquery操纵分页，但链接已更新

时间：2015-06-01 10:13:27

标签： javascript php jquery ajax pagination

我在html上有一个页面，名为view_closing.php。在此视图中，有一个表与一个分页集成。我的目标是，如何在不刷新所有页面的情况下使表移动到另一个记录。因此，它仍然在一个地址上，即：http://localhost/tresnamuda/control_closing/

我谷歌搜索了一段时间，然后我决定制作两个视图，一个视图到所有页面，一个视图到ajax将要求的表。

这是主页：

<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>

这是名为view_closing表的文件2 

<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 as $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>

 

要使用ajax进行分页调用，我创建一个函数用于调用所有页面和一个antoher函数来调用view_table。这是我的控制器上的主要分页：

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 all page
    }
}

现在，我创建了另一个函数来调用基于pagintaion的刷新表。

代码是这样的：

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 the table
        echo $_html;
    }
}

我使用Jquery操纵CI的分页。代码写在一个名为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;
});

而且，感谢上帝，它成功了。像这样 ： Please see the address bar and the link

现在，新问题正在上升：在Action字段中命名为＆＃34; belum selesai＆＃34;在分页工作之后不起作用。 我知道，因为ajax正在呼叫http://localhost/tresnamuda/control_closing/ajax_get_things_table/4。但在链接按钮是href =＆＃34;＃＆＃34; 。所以链接不起作用因为地址现在是：http://localhost/tresnamuda/control_closing/ajax_get_things_table/4/#。但是关于jquery的链接看起来像这样：

$(".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();
}

}）;

如果地址为：http://localhost/tresnamuda/control_closing/

，则链接正常工作

1 个答案:

答案 0 :(得分：2)

问题是你正在使用Ajax加载页面内容，然后尝试将事件附加到它，但是你正在尝试在加载内容之前附加事件。当页面到达$(".linkStatus").click(function() {时，它会扫描页面中所有具有linkstatus类的元素，但由于您的内容尚未加载（Ajax仍在加载它），因此没有该类的元素名称，因此没有设置任何事件。

您需要做的是将事件附加到已存在的内容（例如document），或者在页面加载后附加事件。

这些示例中的任何一个都可以解决您的问题：

将事件附加到现有元素

您需要更改

$(".linkStatus").click(function() {

到

$(document).on('click', '.linkStatus', function() {

在Ajax运行后附加事件

首先，您需要将事件处理程序包装在一个函数中，以便可以调用它。

function Start() {
    $(".linkStatus").click(function() {
        //... Code to run when linkStatus is clicked.
    });
}

然后在你正在加载表的ajax成功函数中，在函数的末尾添加一个对Start()的调用以附加你的事件。

相关问题
最新问题