Skip to content

drFabio/reactBootstrapPaginator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

reactBootstrapPaginator

A contextual paginator on top of react and bootstrap

Installation

  npm install react_bootstrap_paginator

What do you mean with contextual paginator?

I mean that it's presentation will change according to the context.

If you have the pages 1-10 , are on the first one and want to show 10 pages it will look like this: 1_to_10

Notice no arrow or dots indicating more

On 1-50 and you are on page 30 it would look like this:

1-50

Notice both arrows , dots indicating more pages

And if you are on the last page it will look like this:

end

Notice no right arrow and no right dots

Usage ES5 standalone

I have a codepen example here

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Reacomponents - Paginator ES5</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>
    <body>
      <div id="the_paginator"></div>
      <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
      <script src="../../build/react-paginator.min.js"></script>
      <script>
        var Paginator = React.createFactory(ReactPaginator);

        window.onload = function () {
          var PaginatorComp = Paginator({
            current: 10,
            total: 1000,
            onPage:function(page){
              console.log("I should do something regarding page "+page);
            }
          });
          var container = document.getElementById('the_paginator');
          var l = ReactDOM.render(PaginatorComp, container);
        };
      </script>
    </body>
    </html>

Usage ES6

  import Paginator from '../../../src/Paginator.jsx';
  import React from 'react';
  import ReactDOM from 'react-dom';
  const App = React.createClass({
          pages:{
               current: 10,
              total: 1000
          },
          pageClick(page){
              console.log("I should do something regarding page "+page);
          },
          render(){
              return(
                 <Paginator current={this.pages.current} total={this.pages.total} max={this.max} onPage={this.pageClick}></Paginator>
              )
          }
  });
  ReactDOM.render(<App/>, document.getElementById('the_paginator'));

About

A Paginator built with bootstrap and react

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published