Please, Click here to view the code

<!--IN HTML FILE-->  
<div class="row">
    <div class="col-xs-6" style="padding-top:20px">
        <span>Sort by: </span>
        <select class="form-control sort" style="display:inline;max-width:150px;margin-right:10px">
            <option value="short_name" selected>Short Name</option>
            <option value="long_name">Long Name</option>
            <option value="iso2">Country Code</option>
        </select>
        <a href="#order"><i class="fa fa-arrow-up"></i></a><span class="vertical-line"></span>
        <div class="btn-group">
            <a class="btn btn-default active" href="#list"><i class="fa fa-list"></i></a>
            <a class="btn btn-default" href="#grid"><i class="fa fa-th"></i></a>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="btns pull-right"></div>
    </div>
</div>    

<div id="example"></div>
<div class="btns pull-right row"></div>

                

//IN JAVASCRIPT FILE
var paginateExample;
function search(text){
    //Update list from server, send data to server
    paginateExample.update({data:{page:1,search:text}}); 
}
function handlePagerExampleSuccess(data){
    if(data){
        $("#example").fadeOut('fast',function(){
            //load list in element
            $(this).html(data.list);
        }).fadeIn("fast");
        //load buttons in element
        $('.btns').html(data.buttons);
        //top of the page
        $('html, body').animate({
            scrollTop: 0
        }, 0);                    
    }else alert('error pagination');
}
function handlePagerExampleBefore(){
    //Before load function
}
$(document).ready(function(){
    var element = document.getElementById('example');
    //Create object
    paginateExample = new teaPaginate(element,{    
        url : 'customize.php', //url to send data server
        buttonsContainer : 'btns',
        OnLoad : handlePagerExampleSuccess,
        OnBefore: handlePagerExampleBefore,
        textLoading: 'Loading...',
        data:{page:1,init:true}//Send initialize data to server
    }).init();
    //Change a list view
    $('a[href=#list]').live('click', function() {
        $('.btn').removeClass('active');
        $(this).addClass('active');
        paginateExample.update({data:{page:paginateExample.currentPage(),type:'list'}});
    });
    //Change a grid view
    $('a[href=#grid]').live('click', function() {
        $('.btn').removeClass('active');
        $(this).addClass('active');
        paginateExample.update({data:{page:paginateExample.currentPage(),type:'grid'}});
    });
    //Change the sort order of the list
    $('a[href=#order]').live('click', function() {
        var orderType;
        if($(this).find('i').hasClass('fa-arrow-up')){
            $(this).find('i').removeClass('fa-arrow-up').addClass('fa-arrow-down');
            orderType = 'DESC';
        }else{
            $(this).find('i').removeClass('fa-arrow-down').addClass('fa-arrow-up');
            orderType = 'ASC';
        }    
        paginateExample.update({data:{page:paginateExample.currentPage(),order:orderType}});
    });
    //Change the order of the list
    $('.sort').live('change', function() {
        var value = $(this).val();
        paginateExample.update({data:{page:paginateExample.currentPage(),sort:value}}); 
    });
});

                
   
//Custom Class 
/**
* this class extends teaPagination 
* @see teaPagination
*/
class PaginateCustomize extends teaPagination{
    
    public $sql; //sql sentence
    public $defaultOptions = array(
        'beginLoop' => '<div class="row">',
        'endLoop' => '</div>',
        'maxButtons' => 5,
        'itemsPage' => 9,
        'ajax' => true,
        'buttons' => array('class' => 'pagination','btFirst' => false,'btLast' => false),
        'connect_db' => array('user' => 'root', 'database' => 'cakephp', 'password' => 'libertad2')
    );
    private $extendsOptions = array(
        'sort' => 'short_name',
        'order' => 'ASC',
        'typeList' => 'list',
        'search' => null,
        'fieldsSearch' => array()
    );
    
    /**
    * The class constructor
    */
    function __construct($sql, $options, $type) {
        //Open session for processing requests
        if (session_id() == '') {
            session_start();
        }
        //If you started paging delete previous sessions
        if($_POST['init'])unset($_SESSION['paginate']);
        //Added extended options
        foreach($options as $key => $value){
            if(array_key_exists($key, $this->extendsOptions)){
                if(!is_null($value))$_SESSION['paginate'][$key] = $value; 
            }    
        }
        //Instantiate the parent class
        parent::__construct($this->createSelect($_SESSION, $sql), $this->defaultOptions);
        //check type list and create the list
        $type = (isset($_SESSION['paginate']['typeList'])) ? $_SESSION['paginate']['typeList'] : $this->extendsOptions['typeList'];
        if($type == 'list')$this->loop('', array($this,'create_list_data'));
        elseif($type == 'grid') $this->loop('', array($this,'create_grid_data'));
        else $this->loop('', array($this,'create_list_data'));
    }
    
    /**
    * This function return sql
    *
    * @param mixed session data
    * @param string sql query
    * @return final sql
    */
     private function createSelect($session, $sql){
        $sort = (isset($session['paginate']['sort'])) ? ' ORDER BY '.$session['paginate']['sort'] : ' ORDER BY '.$this->extendsOptions['sort'];
        $order = (isset($session['paginate']['order'])) ? $session['paginate']['order'] : $this->extendsOptions['order'];
        if(isset($session['paginate']['search'])){
          if(!empty($session['paginate']['fieldsSearch'])){
              $search = ' ';
              foreach($session['paginate']['fieldsSearch'] as $value){
                  if(end($session['paginate']['fieldsSearch']) === $value)
                      $search .= $value.' LIKE "%'.$session['paginate']['search'].'%"';
                  else
                      $search .= $value.' LIKE "%'.$session['paginate']['search'].'%" OR ';
              }
          }else $search = '';   
        }else $search = '';
        $sql .= $search.$sort.' '.$order;
        return $sql;
    }
    
    /**
    * This function print each iteration
    *
    * @param mixed data associated with the sql query
    * @return each iteration in the list
    */
    protected function create_list_data($data) {
        return '<pre><a href="javascript:void(0)" onClick="alert(\'Country: ' . $data['short_name'] . '\')">' . $data['short_name'] . '</a> - Country code: '.$data['iso2'].'<br/> <small>' . $data['long_name'] . '</small></pre>';
    }

    /**
    * This function print each iteration
    *
    * @param mixed data associated with the sql query
    * @return each iteration in the grid
    */
    protected function create_grid_data($data) {
        return '<div class="col-xs-4"><div class="well" style="min-height:120px;"><a href="javascript:void(0)" onClick="alert(\'Country: ' . $data['short_name'] . '\')">' . $data['short_name'] . '</a> - Country code: '.$data['iso2'].'<br/> <small>' . $data['long_name'] . '</small></div></div>';
    }

    /**
    * This function show total list
    *
    * @return list
    */
    function ShowList(){
        return $this->render();
    }
    
    /**
    * This function show buttons
    *
    * @return buttons
    */
    function ShowButtons(){
        return $this->buttons();
    }
}
    

                
   
//IN FILE PHP 
//get request actions
$sort = (isset($_POST['sort'])) ? $_POST['sort'] : null;
$order = (isset($_POST['order'])) ? $_POST['order'] : null;
$type = (isset($_POST['type'])) ? $_POST['type'] : null;
$search = (isset($_POST['search'])) ? $_POST['search'] : null;
//added new options to the class extends
$options = array(
    'sort' => $sort,
    'order' => $order,
    'typeList' => $type,
    'search' => $search,
    'fieldsSearch' => array('short_name','long_name')
);
//Instance to the new class
$pagination = new PaginateCustomize('SELECT * FROM countries',$options,$type);
//Send json data 'list' to list render and 'buttons', these keys should not be changed!!!
echo json_encode(array('list' => $pagination->ShowList(),'buttons' => $pagination->buttons()));

                
Sort by: