Pagination using Jquery in Codeigniter

Pagination using Jquery in Codeigniter


$page=3;
$page_count=10;
$data=array();
$content='<div class="pagiright">
                <ul>';
                if($page>2)
                {
                $content.='<li><a id="page-list" data-value=1>First</a></li>';
                }
                if($page!=1)
                {
                $content.='<li><a id="page-list" data-value='.($page-1).'> < </a></li>';
                }
                if(($page-2)>0)
                {
                $content.='<li><a id="page-list" data-value='.($page-2).'>'.($page-2).'</a></li>';
                }
                if(($page-1)>0)
                {
                $content.='<li><a id="page-list" data-value='.($page-1).'>'.($page-1).'</a></li>';
                }
                $content.='<li><a id="page-list" class="active" data-value='.($page).'> '.$page.' </a></li>';
               
                if(($page+1)<=$page_count)
                {
                $content.='<li><a id="page-list" data-value='.($page+1).'>'.($page+1).'</a></li>';
                }
                if(($page+2)<=$page_count)
                {
                $content.='<li><a id="page-list" data-value='.($page+2).'>'.($page+2).'</a></li>';
                }
                if($page<$page_count)
                {
                $content.='<li><a id="page-list" data-value='.($page+1).'> > </a></li>';
                }
                if($page<$page_count-1)
                {
                $content.='<li><a id="page-list" data-value='.$page_count.'>Last</a></li>';
                }
                $content.='</ul>
            </div>';
            $data['text']=$content;
            $this->load->view('holidays/pagi',$data);
           
CSS

<style>
.pagiright{width: 450px;
    float: left;}
    .pagiright ul{    margin: 0;
    padding: 0;
    float: right;
}
.pagiright li{list-style: none;
    float: left;
    margin-right: 8px;
    cursor: pointer;
    background: none!important;
    border: none!important;
    padding: 0!important;}
    .pagiright li a{text-decoration: none;
    color: #727272;
    font: 12px Arial,Helvetica,sans-serif;
    padding: 5px 12px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #f6f6f6;
    border: 1px solid #e3e3e3;}
.pagiright li a:hover {
    background: #F28D51;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
}
.pagiright li a.active {
    background: #FF5E00;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #E75222;
}
</style>

Jquery

$.post('controller',{'room_data':rooms},function(data){
   
    location="<?=base_url()?>holidays/holidayInfo/";
    });