如何在没有完整页面刷新的情况下在codeigniter视图中加载特定内容?

时间:2014-12-12 11:27:22

标签: jquery ajax codeigniter

你好我有一个视图,我用分页动态获取内容,每页20条记录,当我点击分页时,它获得关于页码的下20条记录,但我的整个页面在每个分页请求后刷新。所以我想要特定的部分动态加载。如何使用div标签实现这一点,意味着div标签中的特定内容应该动态加载。以下是我的观点页面:请帮助我

<div id="content">
  <div class="container">
    <div class="row-fluid">
      <h2 class="title-divider"><?php echo $page_heading; ?></h2>
    </div>
    <div class="row">
      <!--Blog Roll Content-->
<!--I want only the below content(div) should get refreshed with a pagination request-->
      <div class="span9 blog-roll blog-list"> 
        <?php if(!empty($newsArray)) { foreach($newsArray as $result){ ?>
        <!-- Blog post -->
        <div class="media row-fluid">
          <div class="span1 hidden-phone"> 
            <!-- Date desktop -->
            <div class="date-wrapper"> <span class="date-m"><?php echo $result['monthName']; ?></span> <span class="date-d"><?php echo $result['day']; ?></span> <span class="date-y"><?php echo $result['year']; ?></span></div>
          </div>
          <div class="span11">
            <div class="media-body">
              <h4 class="title media-heading"><a href="<?php echo base_url('news/detail/'.$result['ID']); ?>"><?php echo $result['TTL']; ?></a></h4>
              <div class="tag"></div>
              <ul class="inline meta muted">
                <li><i class="icon-user"></i><?php echo $result['SRC']; ?></li>
                <!-- Meta details mobile -->
                <li><span class="visible-phone"><i class="icon-calendar"></i> <span class="visible-desktop">Created:</span><?php echo $result['day_letter']; echo ' '; echo $result['day']; ?><sup><?php echo $result['daySup']; ?></sup> <?php echo $result['monthName']; echo ' '; echo $result['year']; ?></span></li>
              </ul>
              <p><?php if(!empty($result['CNTNT']))echo $result['CNTNT'].' ...'; ?></p>
              <ul class="inline links">
                <li><a href="<?php echo base_url('news/detail/'.$result['ID']); ?>" class="btn btn-mini"><i class="icon-circle-arrow-right"></i> Read more</a></li>
              </ul>
            </div>
          </div>
        </div>
        <?php }?>
        <div class="pagination pagination-centered">
         <?php echo $links; ?>
        </div>
        <?php  }else { ?>
                    <div class="alert alert-error">
                        <h4>No News Found!</h4>
                    </div>  
            <?php } ?> 
     </div>
         <!--Sidebar-->
      <div class="span3 sidebar sidebar-right">
            <?php 
            $this->load->view('news/news_sidebar');
            ?>
      </div> 
    </div>
  </div>
  <!--.container--> 
</div>
<!--#content-->

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:1)

     Using templates and pagination I am not able to achieve the same, instead i have used ajax GET request to pull the data for the page in pagination links, and embed it into corresponding div tag.

例如,在您的情况下,在代码块周围添加一个新的div。

 <div id="new">
        <div class="pagination pagination-centered">
               <?php echo $links; ?>
        </div>
        <?php  }else { ?>

        <div class="alert alert-error">
            <h4>No News Found!</h4>
        </div>

        <?php } ?> 
 </div>

假设您的模板中有一个区域,请说内容。

对于视图句柄,在分页视图中单击锚点链接上的事件。调用ajax get请求到处理分页的url说(kLinkPageURL = records / paginationHandle /)。

function configure(){
    $('#link a').click(function(){
        href =  $(this).attr("href");
        categoryId = href.split("/");
        loadPageLink(categoryId[1], categoryId[2]);
     });
}

function  loadPageLink(categoryId, page){
        var url = kLinkPageURL + '/' + categoryId + '/' + page;
        $.ajax({
                'url' : url,
                'type': 'GET',
                'success': function(data) {
                        $('#listContainer').html(data);
                        configure();
                }
        });  
}

我们需要在paginationHandle控制器函数中处理base_url和uri_segment。 现在base_url应该是点击分页链接不重定向,但我们可以识别页码和记录标识,我已经使用过(#/ recordId)。在create_links中,页码被分配给链接中锚点的href。

uri_segment用于分页库,在paginationHandle中识别正确的uri_segment。

现在,在您的控制器中,只能为内容区域调用template-&gt; write_view。 它将返回页面的数据,例如此页面上20条记录的信息。

你可以用这种方式将这些数据推送到新的部门$(&#34; new&#34;)。html(data);