Jump to content
Stef's Coding Community

Ajax Pagination In Codeigniter


Recommended Posts

Hello, i try to make an Ajax pagination, but I got error. Here is my code :

 

Here is My Panel Controller :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Panel extends MY_AuthController {
	
	public function __construct()
    {
        parent::__construct();
		$this->load->model("paneldata");
    }
	
	public function index()
	{
		$this->load->view('template/header/panel.php');
		$this->load->view('containt/panel.php');
		$this->load->view('template/footer/panel.php');
	}
	
	public function general_post($awal = 0)
	{
		$this->load->library('pagination');
		$this->load->model('paneldata');
				
		$config['base_url'] = base_url() . '/panel/general_post';
		$config['total_rows'] = $this->paneldata->jumlahpost();
		$config['per_page'] = 3;

		$this->pagination->initialize($config);
		
		$data['link'] = $this->pagination->create_links();
		$data['row'] = $this->paneldata->postview($awal);
		
		//Transkrip Script
		
		
		$this->load->view("section/post.php",$data);
	}
	
	//SOME CODE BELOW HERE

}

Here is my Panel View for header (template/header/panel.php):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<?php echo link_tag('public/css/kickstart.css'); ?>
<?php echo link_tag('public/css/kickstart.css'); ?>
<?php echo link_tag('public/css/mine/panelstyle.css'); ?>
<?php echo link_tag('public/css/mine/footer_acl.css'); ?>
<?php echo '<script src="' .  base_url() . 'public/js/jquery.min.js"></script>'?>
<?php echo '<script src="' .  base_url() . 'public/js/kickstart.js"></script>'?>
<?php echo '<script src="' .  base_url() . 'public/js/administration.js"></script>'?>

</head>

<body>

And here is for content (containt/panel.php):

<body>

	<div id="wrapper2">
    	<header id="logo" class="col_4">
            <?php echo '<img src="' .  base_url() . 'public/css/img/Logo2.png">'?>
        </header>
        <div id="tabcont" class="col_12">
            <ul class="tabs left">
            <li><a href="#tabr1">General</a></li>
            <li><a href="#tabr2">User</a></li>
            <li><a href="#tabr3">Gallery</a></li>
            <li><a href="#tabr4">Construction</a></li>
            </ul>
        
            <div id="tabr1" class="tab-content">
            	<div id="menu" class="col_3">
                    <ul class="menu vertical">
                        <li id="post"><a href="#">Post</a></li>
                        <li id="events"><a href="#">Events</a></li>
                        <li id="pages"><a href="#">Pages</a></li>
                        <li id="user"><a href="#">User</a></li>
                        <li><a href="#">Post</a></li>
                    </ul>
                </div>
                
                <div id="content" class="col_9">
	
                </div>
            </div>
            
            <div id="tabr2" class="tab-content">Tab2</div>
            <div id="tabr3" class="tab-content">Tab3</div>
            
            <div id="tabr4" class="tab-content">
            	<div id="menu" class="col_3">
                    <ul class="menu vertical">
                        <li id="post"><a href="#">Post</a></li>
                        <li id="events"><a href="#">Events</a></li>
                        <li id="pages"><a href="#">Pages</a></li>
                        <li id="user"><a href="#">User</a></li>
                        <li><a href="#">Post</a></li>
                    </ul>
                </div>
                
                <div id="content" class="col_9">
                	
                </div>
            </div>
        </div>
    </div>


Here is my javascript code for administration.js:

	 $(document).ready(function() {
		/*UNTUK TABEL GENERAL*/
	
	  $('#tabr1 #content').load('panel/general_post');
	  $('#tabr4 #content').load('panel/construction_post');
	   
      $("#tabr1 #events").click(function(event){
          $('#tabr1 #content').load('panel/general_event');
      });
	  
	  $("#tabr1 #post").click(function(event){
          $('#tabr1 #content').load('panel/general_post');
	  });
	  
	  $("#tabr1 #user").click(function(event){
          $('#tabr1 #content').load('panel/general_user');
	  });
	  
	  /*UNTUK TABEL CONSTRUCTION*/
	  
	  $("#tabr4 #post").click(function(event){
          $('#tabr4 #content').load('panel/construction_user');
	  });
	  
	  /*UNTUK PAGINATION*/
	  
	  $("#pagination a").click(function(event){
		
		event.preventDefault();

      /* get some values from elements on the page: */
      
	  //var $page = $( this ),
        //  url = $page.attr( 'href' );

      /* Send the data using post */
      
	 // var posting = load( url );

      /* Alerts the results */
      //posting.done(function( data ) {
		//  alert("succes");
		//$('#tabr1 #content').html(data);
      //});
	  alert('succes');
	  $('#isi').load('panel/general_user');  
   });
});

As you see, I use ajax to change the content of containt/panel.php. for example, if click at div#tabr1 #post, it will prevendefault and go to panel/general_post. After that, the content will change to section/post.php (because at function general_post on panel controller, it will load view section/post.php).

 

Here is section/post.php :

<!----><script type="text/javascript" src="http://localhost/2014/14_10_16_peduli_palu_ajax/public/js/jquery.min.js"></script>
<script  type="text/javascript" src="http://localhost/2014/14_10_16_peduli_palu_ajax/public/js/administration.js"></script>
<!---->


<a class="search" href="#">+ Advanced Search</a>
                    <div style="clear:both">
                	</div>
                    <a class="search" href="#"><i class="icon-refresh"></i> Refresh</a>
                    
                    <div style="clear:both">
                	</div>
                    
                	
                    <div id="isi">
                    	<table class="striped">
                        	<tr>
                            	<td>Id</td>
                                <td>Author</td>
                                <td>Category</td>
                                <td>Title</td>
                                <td>Content</td>
                                <td>Date Created</td>
                                <td>Date Modified</td>
                                <td>Action</td>
                            </tr>
                          <?php foreach($row as $r):;?>
                            <tr>
                                <td><?php echo $r->id; ?></td>
                                <td><?php echo $r->author1; ?> <?php echo $r->author2; ?></td>
                                <td><?php echo $r->category; ?></td>
                                <td><?php echo $r->title; ?></td>
                                <td><?php echo implode(' ', array_slice(explode(' ', $r->content), 0, 10)) . "..."; ?></td>
                                <td><?php echo $r->date_created; ?></td>
                                <td><?php echo $r->date_modified; ?></td>
                                <td><a href="#"><i class="icon-edit"></i></a> <a href="facebook.com"><i class="icon-remove"></i></a></td>                            </tr>
	                        <?php endforeach; ?>
                           
                        </table>
                        
                    </div>
                    
                    <div id="pagination">
                      	<?php echo $link; ?>
                    </div>

As you see in first and second line, I input the script. Why do i do this ? Because, section/post.php will not load any script in page, because section/post.php is just called by ajax (Look at admistration.js). But, if I do this, I got errors (I can't click <a> elements, I can't scroll the page, etc). And if i do not input the script (in first and second line on section/post.php), I can click the <a> elements, but the script is not worked (because section/post.php does not identify the script)

 

What should I do ? I Hope you understand my question..

Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...