Education center

Paging is very important if we have more data in database that will display in web, because with paging will make website loading will be faster. Here i will sharing about how to make a paging style in codeigniter. below step by step to make it:

1. In your view, add div class pagination like this
  

2. In your css file add code like below:

div.pagination
{
    padding: 3px 0px 3px 3px;
    margin: 3px 0px 3px 3px;
    float:right;
    font-family:'PT Sans', sans-serif;
}

div.pagination a
{
   
    background-color: #E6E6E6;
    border-color: #C7C7C7 #B2B2B2 #B2B2B2 #C7C7C7;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 5px rgba(255, 255, 255, 0.5) inset, 0 -2px 5px rgba(0, 0, 0, 0.1) inset;
    color: #555555;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    border-radius: 4px 4px 4px 4px;   
    font-size: 14px;
    padding: 8px 8px;
    border:1px solid #C7C7C7;
    background-repeat: no-repeat;
    margin:1px;
    text-shadow:0px 1px 0 #ffffff;
    font-weight: 700;
    background:#f1f1f1;    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#e8e8e8');
    background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e8e8e8));
    background:-moz-linear-gradient(top,  #f1f1f1,  #e8e8e8);
    background:-o-linear-gradient(top,  #f1f1f1,  #e8e8e8);
    font-family:'PT Sans', sans-serif;   
    font-size: 11px;
    min-height: 22px;
    min-width: 8px;
    outline: 0 none;  
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: baseline;
    white-space: pre-line;
}


div.pagination a:hover, div.pagination a:active
{
    background-color: #C7C7C7;
    border-color: #C7C7C7 #B2B2B2 #B2B2B2 #C7C7C7;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 5px rgba(255, 255, 255, 0.5) inset, 0 -2px 5px rgba(0, 0, 0, 0.1) inset;
    color: #555555;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    border-radius: 4px 4px 4px 4px;   
    font-size: 14px;
    padding: 9px 8px;
    color:#353535;
    text-shadow:0px 1px 0 #ffffff;
    font-weight: 700;
    background:#E6E6E6;    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#000000');
    background:-webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#E6E6E6));
    background:-moz-linear-gradient(top,  #E6E6E6,  #E6E6E6);
    background:-o-linear-gradient(top,  #E6E6E6,  #E6E6E6);
    font-family:'PT Sans', sans-serif;   
    font-size: 11px;
    min-height: 22px;
    min-width: 8px;
    outline: 0 none;  
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: baseline;
    white-space: pre-line;
}