I am trying to use a plugin for dynamic pagination.
The plugin is-
Bootpag - Dynamic Pagination
In the Home page of the plugin, I found an example, and I tried to use that as an example and what I have done is like this-
<html>
<head>
<script src="//code.jquery/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//raw.github/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
// init bootpag
$('#page-selection').bootpag({
total: 10
}).on("page", function(event, /* page number here */ num){
$("#content").html(num); // Changing div content to dynamic content
});
</script>
</body>
</html>I am trying to use a plugin for dynamic pagination.
The plugin is-
Bootpag - Dynamic Pagination
In the Home page of the plugin, I found an example, and I tried to use that as an example and what I have done is like this-
<html>
<head>
<script src="//code.jquery./jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//raw.github./botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
// init bootpag
$('#page-selection').bootpag({
total: 10
}).on("page", function(event, /* page number here */ num){
$("#content").html(num); // Changing div content to dynamic content
});
</script>
</body>
</html>But it is not working.
Can anyone please help?
Thanks in advance for helping.
Share Improve this question asked Mar 26, 2016 at 11:33 S M Abrar JahinS M Abrar Jahin 14.6k24 gold badges115 silver badges170 bronze badges 2-
if you are running this from you harddrive (and not a server) you will have to add the protocol to your urls.
http:orhttps:at the start of the included files. As you see, the demo you posted in SO is working fine – Gabriele Petrioli Commented Mar 26, 2016 at 11:37 - I also tried in a server (this code, not local), but it is not working :( – S M Abrar Jahin Commented Mar 26, 2016 at 11:43
1 Answer
Reset to default 5I have solved it by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});<script src="http://code.jquery./jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster./jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>More customised version-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});<script src="http://code.jquery./jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster./jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>Even more customization can be done by this options-
Warning
Here I am using a CDN (http://botmonster./jquery-bootpag/jquery.bootpag.js) for showing content. But it is not remended.
Hardly remendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even More
If want to update paginator at run time, call the paginator like this-
$('#show_paginator').bootpag({total: 55});
Even more, can be found from here.
I think u have your plete answer.