JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<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">
<div class="wrapper">
  <div class="container">
    
    <div class="row">
      <div class="col-sm-12">
        <h1>jQuery Bootpag Pagination Example</h1>
        <p>Showcaes the jQueyr Bootpag pagination JS library for creating simple, quick JS based pagination.</p>
        <p id="pagination-here"></p>
        <p id="content">Dynamic page content</p>
      </div>
    </div>
  </div>
  <ul hidden id="myul">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  </ul>
</div>

CSS

/*Generic*/
.wrapper{
  margin: 60px auto;
  text-align: center;
}
h1{
  margin-bottom: 1.25em;
}

/*Specific styling*/
#content{
  padding: 15px;
  border: solid 1px #eee;
  max-width: 660px;
  margin: auto;
  border-radius: 4px;
}

JavaScript

$('#pagination-here').bootpag({
    total: 10,          
    page: 1,            
    maxVisible: 5,     
    leaps: true,
    href: "#result-page-{{number}}",
})

//page click action
$('#pagination-here').on("page", function(event, num){
    //show / hide content or pull via ajax etc
    var val =$("#myul").index("li:gt("+num+")").html();
    $("#content").html(val); 
});