Jquery pagination without any plugin

1.Pagination.html


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple pagination</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="jquerypagination.css" media="screen" />
</head>
<body>

<div id="sixth-container">
<table>
<tbody>
<!--http://www.marijn.org/everything-is-4/counting-0-to-100/english/-->
<tr><td>One</td></tr>
<tr><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr><td>Five</td></tr>
<tr><td>Six</td></tr>
<tr><td>Seven</td></tr>
<tr><td>Eight</td></tr>
<tr><td>Nine</td></tr>
<tr><td>Ten</td></tr>
<tr><td>Eleven</td></tr>
<tr><td>Twelve</td></tr>
<tr><td>Thirteen</td></tr>
<tr><td>Fourteen</td></tr>
<tr><td>Fifteen</td></tr>
<tr><td>Sixteen</td></tr>
<tr><td>Seventeen</td></tr>
<tr><td>Eighteen</td></tr>
<tr><td>Nineteen</td></tr>
<tr><td>Twenty</td></tr>
<tr><td>Twenty-one</td></tr>
<tr><td>Twenty-two</td></tr>
<tr><td>Twenty-three</td></tr>
<tr><td>Twenty-four</td></tr>
<tr><td>Twenty-five</td></tr>
<tr><td>Twenty-six</td></tr>
<tr><td>Twenty-seven</td></tr>
<tr><td>Twenty-eight</td></tr>
<tr><td>Twenty-nine</td></tr>
<tr><td>Thirty</td></tr>
<tr><td>Thirty-one</td></tr>
<tr><td>Thirty-two</td></tr>
<tr><td>Thirty-three</td></tr>
<tr><td>Thirty-four</td></tr>
<tr><td>Thirty-five</td></tr>
<tr><td>Thirty-six</td></tr>
<tr><td>Thirty-seven</td></tr>
<tr><td>Thirty-eight</td></tr>
<tr><td>Thirty-nine</td></tr>
<tr><td>Forty</td></tr>
<tr><td>Forty-one</td></tr>
<tr><td>Forty-two</td></tr>
<tr><td>Forty-three</td></tr>
<tr><td>Forty-four</td></tr>
<tr><td>Forty-five</td></tr>
<tr><td>Forty-six</td></tr>
<tr><td>Forty-seven</td></tr>
<tr><td>Forty-eight</td></tr>
<tr><td>Forty-nine</td></tr>
<tr><td>Fifty</td></tr>
<tr><td>Fifty-one</td></tr>
<tr><td>Fifty-two</td></tr>
<tr><td>Fifty-three</td></tr>
<tr><td>Fifty-four</td></tr>
<tr><td>Fifty-five</td></tr>
<tr><td>Fifty-six</td></tr>
<tr><td>Fifty-seven</td></tr>
<tr><td>Fifty-eight</td></tr>
<tr><td>Fifty-nine</td></tr>
<tr><td>Sixty</td></tr>
<tr><td>Sixty-one</td></tr>
<tr><td>Sixty-two</td></tr>
<tr><td>Sixty-three</td></tr>
<tr><td>Sixty-four</td></tr>
<tr><td>Sixty-five</td></tr>
<tr><td>Sixty-six</td></tr>
<tr><td>Sixty-seven</td></tr>
<tr><td>Sixty-eight</td></tr>
<tr><td>Sixty-nine</td></tr>
<tr><td>Seventy</td></tr>
<tr><td>Seventy-one</td></tr>
<tr><td>Seventy-two</td></tr>
<tr><td>Seventy-three</td></tr>
<tr><td>Seventy-four</td></tr>
<tr><td>Seventy-five</td></tr>
<tr><td>Seventy-six</td></tr>
<tr><td>Seventy-seven</td></tr>
<tr><td>Seventy-eight</td></tr>
<tr><td>Seventy-nine</td></tr>
<tr><td>Eighty</td></tr>
<tr><td>Eighty-one</td></tr>
<tr><td>Eighty-two</td></tr>
<tr><td>Eighty-three</td></tr>
<tr><td>Eighty-four</td></tr>
<tr><td>Eighty-five</td></tr>
<tr><td>Eighty-six</td></tr>
<tr><td>Eighty-seven</td></tr>
<tr><td>Eighty-eight</td></tr>
<tr><td>Eighty-nine</td></tr>
<tr><td>Ninety</td></tr>
<tr><td>Ninety-one</td></tr>
<tr><td>Ninety-two</td></tr>
<tr><td>Ninety-three</td></tr>
<tr><td>Ninety-four</td></tr>
<tr><td>Ninety-five</td></tr>
<tr><td>Ninety-six</td></tr>
<tr><td>Ninety-seven</td></tr>
<tr><td>Ninety-eight</td></tr>
<tr><td>Ninety-nine</td></tr>
<tr><td>One hundred</td></tr>
<tr><td>One hundred one</td></tr>
<tr><td>One hundred two</td></tr>
<tr><td>One hundred three</td></tr>
<tr><td>One hundred four</td></tr>
<tr><td>One hundred five</td></tr>
<tr><td>One hundred six</td></tr>
<tr><td>One hundred seven</td></tr>
<tr><td>One hundred eight</td></tr>
<tr><td>One hundred nine</td></tr>
<tr><td>One hundred ten</td></tr>
<tr><td>One hundred eleven</td></tr>
<tr><td>One hundred twelve</td></tr>
<tr><td>One hundred thirteen</td></tr>
<tr><td>One hundred fourteen</td></tr>
<tr><td>One hundred fifteen</td></tr>
<tr><td>One hundred sixteen</td></tr>
<tr><td>One hundred seventeen</td></tr>
<tr><td>One hundred eighteen</td></tr>
<tr><td>One hundred nineteen</td></tr>
<tr><td>One hundred twenty</td></tr>
<tr><td>One hundred twenty-one</td></tr>
<tr><td>One hundred twenty-two</td></tr>
<tr><td>One hundred twenty-three</td></tr>
<tr><td>One hundred twenty-four</td></tr>
<tr><td>One hundred twenty-five</td></tr>
<tr><td>One hundred twenty-six</td></tr>
<tr><td>One hundred twenty-seven</td></tr>
<tr><td>One hundred twenty-eight</td></tr>
<tr><td>One hundred twenty-nine</td></tr>
<tr><td>One hundred thirty</td></tr>
<tr><td>One hundred thirty-one</td></tr>
<tr><td>One hundred thirty-two</td></tr>
<tr><td>One hundred thirty-three</td></tr>
<tr><td>One hundred thirty-four</td></tr>
<tr><td>One hundred thirty-five</td></tr>
<tr><td>One hundred thirty-six</td></tr>
<tr><td>One hundred thirty-seven</td></tr>
<tr><td>One hundred thirty-eight</td></tr>
<tr><td>One hundred thirty-nine</td></tr>
<tr><td>One hundred forty</td></tr>
<tr><td>One hundred forty-one</td></tr>
<tr><td>One hundred forty-two</td></tr>
<tr><td>One hundred forty-three</td></tr>
<tr><td>One hundred forty-four</td></tr>
<tr><td>One hundred forty-five</td></tr>
<tr><td>One hundred forty-six</td></tr>
<tr><td>One hundred forty-seven</td></tr>
<tr><td>One hundred forty-eight</td></tr>
<tr><td>One hundred forty-nine</td></tr>
<tr><td>One hundred fifty</td></tr>
<tr><td>One hundred fifty-one</td></tr>
<tr><td>One hundred fifty-two</td></tr>
<tr><td>One hundred fifty-three</td></tr>
<tr><td>One hundred fifty-four</td></tr>
<tr><td>One hundred fifty-five</td></tr>
<tr><td>One hundred fifty-six</td></tr>
<tr><td>One hundred fifty-seven</td></tr>
<tr><td>One hundred fifty-eight</td></tr>
<tr><td>One hundred fifty-nine</td></tr>
<tr><td>One hundred sixty</td></tr>
<tr><td>One hundred sixty-one</td></tr>
<tr><td>One hundred sixty-two</td></tr>
<tr><td>One hundred sixty-three</td></tr>
<tr><td>One hundred sixty-four</td></tr>
<tr><td>One hundred sixty-five</td></tr>
<tr><td>One hundred sixty-six</td></tr>
<tr><td>One hundred sixty-seven</td></tr>
<tr><td>One hundred sixty-eight</td></tr>
<tr><td>One hundred sixty-nine</td></tr>
<tr><td>One hundred seventy</td></tr>
<tr><td>One hundred seventy-one</td></tr>
<tr><td>One hundred seventy-two</td></tr>
<tr><td>One hundred seventy-three</td></tr>
<tr><td>One hundred seventy-four</td></tr>
<tr><td>One hundred seventy-five</td></tr>
<tr><td>One hundred seventy-six</td></tr>
<tr><td>One hundred seventy-seven</td></tr>
<tr><td>One hundred seventy-eight</td></tr>
<tr><td>One hundred seventy-nine</td></tr>
<tr><td>One hundred eighty</td></tr>
<tr><td>One hundred eighty-one</td></tr>
<tr><td>One hundred eighty-two</td></tr>
<tr><td>One hundred eighty-three</td></tr>
<tr><td>One hundred eighty-four</td></tr>
<tr><td>One hundred eighty-five</td></tr>
<tr><td>One hundred eighty-six</td></tr>
<tr><td>One hundred eighty-seven</td></tr>
<tr><td>One hundred eighty-eight</td></tr>
<tr><td>One hundred eighty-nine</td></tr>
<tr><td>One hundred ninety</td></tr>
<tr><td>One hundred ninety-one</td></tr>
<tr><td>One hundred ninety-two</td></tr>
<tr><td>One hundred ninety-three</td></tr>
<tr><td>One hundred ninety-four</td></tr>
<tr><td>One hundred ninety-five</td></tr>
<tr><td>One hundred ninety-six</td></tr>
<tr><td>One hundred ninety-seven</td></tr>
<tr><td>One hundred ninety-eight</td></tr>
<tr><td>One hundred ninety-nine</td></tr>
<tr><td>Two hundred</td></tr>
</tbody>
</table>
<div class="my-navigation">
<div class="simple-pagination-first"></div>
<div class="simple-pagination-previous"></div>
<div class="simple-pagination-page-numbers"></div>
<div class="simple-pagination-next"></div>
<div class="simple-pagination-last"></div>
</div>
<div class="simple-pagination-page-x-of-x"></div>
<div class="simple-pagination-showing-x-of-x"></div>
<div>
Display <select class="simple-pagination-items-per-page"></select> items per page.
</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="Pagination.js"></script>
<script>
(function($){

$('#first-container').simplePagination();

$('#second-container').simplePagination({
items_per_page: 5,
number_of_visible_page_numbers: 10
});

$('#third-container').simplePagination({
items_per_page: 10
});

$('#fourth-container').simplePagination({
first_content: '&lt;&lt;',
previous_content: '<',
next_content: '>',
last_content: '>>'
});

$('#fifth-container').simplePagination({
use_page_count: true
});

$('#sixth-container').simplePagination({
items_per_page: 11,
items_per_page_content: {
'Six': 6,
'Eleven': 11,
'Seventeen': 17,
'Thirty-three': 33,
'Sixty-seven': 67
}
});

})(jQuery);
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48624238-1', 'ddenhartog.github.io');
ga('send', 'pageview');
</script>
</body>
</html>


2.Jquery Pagination.CSS

/*
Styles related DIRECTLY with jQuery-simple-pagination
*/
.simple-pagination-page-numbers a
{
display: block;
float: left;
width: 2rem;
text-align: center;
}
a
{
color: #216ed9;
text-decoration: none;
}
a h1
{
padding: 2rem;
color: #216ed9;
text-align: center;
}
a:hover
{
text-decoration: underline;
}
a[class^="simple-pagination-navigation-"] + a[class^="simple-pagination-navigation-"]
{
margin-right: 0;
}
a[class*="simple-pagination-navigation-disabled"]
{
color: black;
cursor: default;
}

/*
Styles used to page things look nice :)
*/
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body
{
font: 1rem/1rem Helvetica, sans-serif;
background-color: white;
}
h1,
h2,
h3,
h4,
h5,
h6
{
line-height: 2em;
}
h1
{
color: #9b21d9;
}
h3
{
color: white;
}
h4
{
border-radius: .25rem;
margin: 1rem 0;
padding: .5rem;
background-color: white;
color: #ff2727;
}
header
{
border-radius: .5rem .5rem 0 0;
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #9b21d9;
}
#header
{
border-radius: .5rem;
}
body > div,
header
{
width: 50%;
margin: 0 auto;
padding: 2rem;
}
body > div + header
{
margin-top: 6rem;
}
body > div
{
border-radius: 0 0 .5rem .5rem;
background-color: #18635c;
margin-top: 81px;
}
body > div > div,
div > div + table
{
margin-top: 1rem;
}
select
{
border: 1px solid black;
font-size: 13px;
}
i
{
padding: .125rem .5rem;
background-color: white;
color: #ff2727;
font-weight: normal;
}
.my-navigation:after
{
content: "";
display: table;
clear: both;
}
.my-navigation div
{
float: left;
}
.my-navigation div + div
{
margin-left: .5rem;
}




@media screen and (max-width: 959px){
body > div,
header
{
width: 90%;
}
}

3.Pagination.JS

(function($){

$.fn.simplePagination = function(options)
{
var settings = $.extend({}, $.fn.simplePagination.defaults, options);

/*
NUMBER FORMATTING
*/
function simple_number_formatter(number, digits_after_decimal, thousands_separator, decimal_separator)
{
//OTHERWISE 0==false==undefined
digits_after_decimal = isNaN(digits_after_decimal) ? 2 : parseInt(digits_after_decimal);
//was a thousands place separator provided?
thousands_separator = (typeof thousands_separator === 'undefined') ? ',' : thousands_separator;
//was a decimal place separator provided?
decimal_separator = (typeof decimal_separator === 'undefined') ? '.' : decimal_separator;

//123.45 => 123==integer; 45==fraction
var parts = ((+number).toFixed(digits_after_decimal) + '').split(decimal_separator),  // Force Number typeof with +: +number
//obtain the integer part
integer = parts[0] + '',
//obtain the fraction part IF one exists
fraction = (typeof parts[1] === 'undefined') ? '' : parts[1],
//create the decimal(fraction) part of the answer
decimal = digits_after_decimal > 0 ? decimal_separator + fraction : '',
//find 1 or more digits, EXACTLY PRECEDING, exactly 3 digits
pattern = /(\d+)(\d{3})/;
//pattern = /(\d)(?=(\d{3})+$)/; .replace(..., '$1' + thousands_separator

//while the pattern can be matched
while(pattern.test(integer))
{
//insert the specified thousands place separator
integer = integer.replace(pattern, '$1' + thousands_separator + '$2');
}

//return the formated number!
return integer + decimal;
}

return this.each(function()
{
var container_id = '#' + $(this).attr('id'),
items = $(this).find(settings.pagination_container).children(),
item_count = items.length,
items_per_page = parseInt(settings.items_per_page),
page_count = Math.ceil(item_count / items_per_page),
number_of_visible_page_numbers = parseInt(settings.number_of_visible_page_numbers);

// Show the appropriate items given the specific page_number
function refresh_page(page_number, item_range_min, item_range_max)
{
items.hide();
items.slice(item_range_min, item_range_max).show();
}

function refresh_first(page_number)
{
// e.g.
// <a href="#" class="simple-pagination-navigation-first [simple-pagination-nagivation-disabled]"
// data-simple-pagination-page-number="1">First</a>
/*
var element = document.createElement(settings.navigation_element);
element.id = 'rawr';
element.href = '#';
element.className = settings.html_prefix + '-navigation-first';
element.className += page_count === 1 || page_number === 1 ? ' ' + settings.html_prefix + '-navigation-disabled' : '';
element.setAttribute('data-' + settings.html_prefix + '-page-number', 1);
element.appendChild(document.createTextNode(settings.first_content));
*/
var first_html = '<' + settings.navigation_element + ' href="#" class="' + settings.html_prefix + '-navigation-first';
first_html += page_count === 1 || page_number === 1 ? ' ' + settings.html_prefix + '-navigation-disabled' : '';
first_html += '" data-' + settings.html_prefix + '-page-number="' + 1 + '">' + settings.first_content + '</' + settings.navigation_element + '>';
return first_html;  // return element.outerHTML;
}

function refresh_previous(page_number)
{
var previous_page = page_number > 1 ? page_number - 1 : 1,
previous_html = '<' + settings.navigation_element + ' href="#" class="' + settings.html_prefix + '-navigation-previous';
previous_html += page_count === 1 || page_number === 1 ? ' ' + settings.html_prefix + '-navigation-disabled' : '';
previous_html += '" data-' + settings.html_prefix + '-page-number="' + previous_page + '">' + settings.previous_content + '</' + settings.navigation_element + '>';
return previous_html;
}

function refresh_next(page_number)
{
var next_page = page_number + 1 > page_count ? page_count : page_number + 1,
next_html = '<' + settings.navigation_element + ' href="#" class="' + settings.html_prefix + '-navigation-next';
next_html += page_count === 1 || page_number === page_count ? ' ' + settings.html_prefix + '-navigation-disabled' : '';
next_html += '" data-' + settings.html_prefix + '-page-number="' + next_page + '">' + settings.next_content + '</' + settings.navigation_element + '>';
return next_html;
}

function refresh_last(page_number)
{
var last_html = '<' + settings.navigation_element + ' href="#" class="' + settings.html_prefix + '-navigation-last';
last_html += page_count === 1 || page_number === page_count ? ' ' + settings.html_prefix + '-navigation-disabled' : '';
last_html += '" data-' + settings.html_prefix + '-page-number="' + page_count + '">' + settings.last_content + '</' + settings.navigation_element + '>';
return last_html;
}

function refresh_page_numbers(page_number)
{
// half_of_number_of_page_numbers_visable causes even numbers to be treated the same as the next LOWEST odd number (e.g. 6 === 5)
// Used to center the current page number in 'else' below
var half_of_number_of_page_numbers_visable = Math.ceil(number_of_visible_page_numbers / 2) - 1,
current_while_page = 0,
page_numbers_html = [],
create_page_navigation = function()
{
page_number_html = '<' + settings.navigation_element + ' href="#" class="' + settings.html_prefix + '-navigation-page';
page_number_html += page_count === 1 || page_number === current_while_page ? ' ' + settings.html_prefix + '-navigation-disabled' : '';
page_number_html += '" data-' + settings.html_prefix + '-page-number="' + current_while_page + '">' + simple_number_formatter(current_while_page, 0, settings.thousands_separator) + '</' + settings.navigation_element + '>';
page_numbers_html.push(page_number_html);
};

//are we on the left half of the desired truncation length?
if(page_number <= half_of_number_of_page_numbers_visable)
{
var max = half_of_number_of_page_numbers_visable * 2 + 1;
max = max > page_count ? page_count : max;
while(current_while_page < max)
{
++current_while_page;
create_page_navigation();
}
}
//are we on the right side of the desired truncation length?
else if(page_number > page_count - half_of_number_of_page_numbers_visable)
{
var min = page_count - half_of_number_of_page_numbers_visable * 2 - 1;
current_while_page = min < 0 ? 0 : min;
while(current_while_page < page_count)
{
++current_while_page;
create_page_navigation();
}
}
//have lots of pages
//half_of_num... + number_of_visible_page_numbers + half_of_num...
//center the current page between: number_of_visible_page_numbers
else
{
var min = page_number - half_of_number_of_page_numbers_visable - 1,
max = page_number + half_of_number_of_page_numbers_visable;
current_while_page = min < 0 ? 0 : min;
max = max > page_count ? page_count : max;//shouldn't need this but just being cautious
while(current_while_page < max)
{
++current_while_page;
create_page_navigation();
}
}

return page_numbers_html.join('');
}

function refresh_items_per_page_list()
{
var items_per_page_html = '';
$.each(settings.items_per_page_content, function(k, v){
k = (typeof k === 'Number') ? simple_number_formatter(k, 0, settings.thousands_separator) : k;
v = parseInt(v);
items_per_page_html += '<option value="' + v + '"';
items_per_page_html += v === items_per_page ? ' selected' : '';
items_per_page_html += '>' + k + '</option>\n';
});
return items_per_page_html;
}

function refresh_specific_page_list(page_number)
{
var select_html = '';
for(var i=1; i<=page_count; i++)
{
select_html += '<option value="' + i + '"';
select_html += i === page_number ? ' selected' : '';
select_html += '>' + simple_number_formatter(i, 0, settings.thousands_separator) + '</option>\n';
}
return select_html;
}

function refresh_simple_pagination(page_number)
{
var item_range_min = page_number * items_per_page - items_per_page,
item_range_max = item_range_min + items_per_page;

item_range_max = item_range_max > item_count ? item_count : item_range_max;

refresh_page(page_number, item_range_min, item_range_max);

if(settings.use_first)
{
$(container_id + ' .' + settings.html_prefix + '-first').html(refresh_first(page_number));
}
if(settings.use_previous)
{
$(container_id + ' .' + settings.html_prefix + '-previous').html(refresh_previous(page_number));
}
if(settings.use_next)
{
$(container_id + ' .' + settings.html_prefix + '-next').html(refresh_next(page_number));
}
if(settings.use_last)
{
$(container_id + ' .' + settings.html_prefix + '-last').html(refresh_last(page_number));
}
if(settings.use_page_numbers && number_of_visible_page_numbers !== 0)
{
$(container_id + ' .' + settings.html_prefix + '-page-numbers').html(refresh_page_numbers(page_number));
}
if(settings.use_page_x_of_x)
{
var page_x_of_x_html = '' + settings.page_x_of_x_content + ' ' + simple_number_formatter(page_number, 0, settings.thousands_separator) + ' of ' + simple_number_formatter(page_count, 0, settings.thousands_separator);
$(container_id + ' .' + settings.html_prefix + '-page-x-of-x').html(page_x_of_x_html);
}
if(settings.use_page_count)
{
$(container_id + ' .' + settings.html_prefix + '-page-count').html(page_count);
}
if(settings.use_showing_x_of_x)
{
var showing_x_of_x_html = settings.showing_x_of_x_content + ' ' + simple_number_formatter(item_range_min + 1, 0, settings.thousands_separator) + '-' + simple_number_formatter(item_range_max, 0, settings.thousands_separator) + ' of ' + simple_number_formatter(item_count, 0, settings.thousands_separator);
$(container_id + ' .' + settings.html_prefix + '-showing-x-of-x').html(showing_x_of_x_html);
}
if(settings.use_item_count)
{
$(container_id + ' .' + settings.html_prefix + '-item-count').html(item_count);
}
if(settings.use_items_per_page)
{
$(container_id + ' .' + settings.html_prefix + '-items-per-page').html(refresh_items_per_page_list);
}
if(settings.use_specific_page_list)
{
$(container_id + ' .' + settings.html_prefix + '-select-specific-page').html(refresh_specific_page_list(page_number));
}
}
refresh_simple_pagination(1);

$(container_id).on('click', settings.navigation_element + '[data-' + settings.html_prefix + '-page-number]', function(e)
{
e.preventDefault();

var page_number = +$(this).attr('data-' + settings.html_prefix + '-page-number');
refresh_simple_pagination(page_number);
});

$(container_id + ' .' + settings.html_prefix + '-items-per-page').change(function()
{
items_per_page = +$(this).val();
page_count = Math.ceil(item_count / items_per_page);
refresh_simple_pagination(1);
});

$(container_id + ' .' + settings.html_prefix + '-select-specific-page').change(function()
{
specific_page = +$(this).val();
refresh_simple_pagination(specific_page);
});
});
};

$.fn.simplePagination.defaults = {
pagination_container: 'tbody',
html_prefix: 'simple-pagination',
navigation_element: 'a',//button, span, div, et cetera
items_per_page: 25,
number_of_visible_page_numbers: 5,
//
use_page_numbers: true,
use_first: true,
use_previous: true,
use_next: true,
use_last: true,
//
use_page_x_of_x: true,
use_page_count: false,// Can be used to combine page_x_of_x and specific_page_list
use_showing_x_of_x: true,
use_item_count: false,
use_items_per_page: true,
use_specific_page_list: true,
//
first_content: 'First',  //e.g. '<<'
previous_content: 'Previous',  //e.g. '<'
next_content: 'Next',  //e.g. '>'
last_content: 'Last', //e.g. '>>'
page_x_of_x_content: 'Page',
showing_x_of_x_content: 'Showing',
//
items_per_page_content: {
'Five': 5,
'Ten': 10,
'Twenty-five': 25,
'Fifty': 50,
'One hundred': 100
},
thousands_separator: ','
};

})(jQuery);

ScreenShot:



Comments

Popular posts from this blog

Angular UI Grid To Bind JSON Data

String split equal parts and reverse the string in c#

Web api to jquery call