Deepesh Uniyal Deepesh Uniyal - 1 month ago 8
jQuery Question

how to use pagination in bootstrap

I am using below code for pagination, which I have got from this link.
http://botmonster.com/jquery-bootpag/#.V5qvJ-0sjVM
but it is not working for me.

<html>
<head>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/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("Insert content"); // some ajax content loading...
});
</script>
</body>
</html>


I am new in jquery. please check this once, and let me know the mistake I am doing.

thanks.

Answer

The problem is that you can't directly link the jquery-bootpag JS file from github. Either upload it locally to your environment, or change the link to something like:

//rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js, such that your imports look like this:

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Comments