Paginathing.js jquery configuration Parameters

HTML Structure

<Divclass= "Panel Panel-primary">  <Divclass= "Panel-heading">    <H3class= "Panel-title">List of item.</H3>  </Div>  <ulclass= "List-group">    <Liclass= "List-group-item">Your Item 1</Li>    <Liclass= "List-group-item">Your Item 2</Li>    <Liclass= "List-group-item">Your Item 3</Li>    <Liclass= "List-group-item">Your Item 4</Li>    <Liclass= "List-group-item">Your Item 5</Li>    <Liclass= "List-group-item">Your Item 6</Li>  </ul></Div>  

introduction of jquery and Paginathing.js files in the page

<src= "Js/jquery.min.js"></script>  <src= "Js/paginathing.js.js"></script  >

Initializing plug-ins

After the page DOM element has finished loading, initialize the jquery paging plug-in by using the following method. Pagination of the unordered list shows 2 records per page.

<script type= "Text/javascript" >  jQuery (document). Ready (function($) {    $ ( '. List-group '). paginathing ({          2,          ' panel '    })  }); </script>

JQuery

$ ('. Infoul '). paginathing ({        perpage:        ' home ',        ' last '    })

Configuration Parameters

Perpage:10,//number of records displayed per page

Limitpagination:false,//can be false or a numeric value. The page number used to limit pagination:

Prevnext:true,//whether to allow the previous page button to be displayed.

Firstlast:true,//whether the first page and last page buttons are allowed to be displayed.

Prevtext: '? ', text displayed on the previous page button.

Nexttext: The text displayed on the '? ',//Next-page button.

Firsttext: The text displayed on the first page button.

Lasttext: The text displayed on the ' last ',//Final page button.

Containerclass: ' Pagination-container ',//container's class name

Ulclass: ' Pagination ', the class name of the//ul element

Liclass: ' Page ', the class name of the//li element

Activeclass: ' Active ',//The class name of the current paging button

Disabledclass: ' Disable '//Disabled Paging button class name

After the Insertafter:null//key paging is passed to the specified element, it can be null, or a class name, or an ID

Pagenumbers:false//Displays the total number of pages, the limitpagination parameter must be set to true.

pagination style (bootstrap style)

. pagination {Display:inline-block;    padding-left:0;    margin:20px 0; border-radius:4px;}. Pagination > li {display:inline;}.    Pagination > li > A,.pagination > li > Span {position:relative;    /*float:left;*/padding:6px 12px;    Margin-left: -1px;    line-height:1.42857143;    Color: #337ab7;    Text-decoration:none;    Background-color: #fff; border:1px solid #ddd;}.    Pagination > Li:first-child > A,.pagination > Li:first-child > span {margin-left:0;    border-top-left-radius:4px; border-bottom-left-radius:4px;}.    Pagination > Li:last-child > A,.pagination > Li:last-child > span {border-top-right-radius:4px; border-bottom-right-radius:4px;}. Pagination > li > A:hover,.pagination > li > Span:hover,.pagination > li > A:focus,.pagination > Li & Gt    Span:focus {z-index:2;    Color: #23527c;    Background-color: #eee; Border-color: #ddd;}. Pagination >. Active > A,.paginatIon >. active > Span,.pagination >. active > A:hover,.pagination >. active > Span:hover,.pagination >    . Active > A:focus,.pagination >. active > Span:focus {z-index:3;    Color: #fff;    Cursor:default;    Background-color: #337ab7; Border-color: #337ab7;}. Pagination > Disabled > Span,.pagination >. disabled > Span:hover,.pagination >. Disabled > Span:focus, . pagination >. Disabled > A,.pagination >. disabled > A:hover,.pagination >. disabled > A:focus {col    Or: #777;    cursor:not-allowed;    Background-color: #fff; Border-color: #ddd;}.    Pagination-lg > li > A,.pagination-lg > li > Span {padding:10px 16px;    font-size:18px; line-height:1.3333333;}.    Pagination-lg > Li:first-child > A,.pagination-lg > Li:first-child > span {border-top-left-radius:6px; border-bottom-left-radius:6px;}. Pagination-lg > Li:last-child > A,.pagination-lg > Li:last-child > Span {    border-top-right-radius:6px; border-bottom-right-radius:6px;}.    Pagination-sm > li > A,.pagination-sm > li > Span {padding:5px 10px;    font-size:12px; line-height:1.5;}.    Pagination-sm > Li:first-child > A,.pagination-sm > Li:first-child > span {border-top-left-radius:3px; border-bottom-left-radius:3px;}.    Pagination-sm > Li:last-child > A,.pagination-sm > Li:last-child > span {border-top-right-radius:3px; border-bottom-right-radius:3px;}

Paginathing.js jquery configuration Parameters