Bootstrap page plug-in: Bootstrap-paginator

Today and you share a bootstrap page plug-in: Bootstrap-paginator.

Plugin Address:

Https://github.com/lyonlai/bootstrap-paginator

Look at the directory structure first

$bootstrap-paginator: Represents the root directory after the plugin is unzipped.

$bootstrap-paginator/build: The plugin compressed JS file, need to be introduced into the project.

$bootstrap-paginator/css: The CSS file used by the plugin to store the directory.

$bootstrap-paginator/documentation: The directory where the website demo is hosted.

Files that need to be introduced:

<!--in the $BOOTSTRAP-PAGINATOR/CSS directory--
<link href=". /third-part/bootstrap-paginator/documentation.css "rel="stylesheet " >
<!--in the $bootstrap-paginator/build directory--
<script src=". /third-part/bootstrap-paginator/bootstrap-paginator.min.js"></script>  

Share my demo source code:

<! DOCTYPE html>"ZH-CN">"Utf-8"> <meta http-equiv="x-ua-compatible"Content="Ie=edge"> <meta name="Viewport"Content="Width=device-width, initial-scale=1"> <title>Title</title> <link href=".. /third-part/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"Rel="stylesheet"> <link href=".. /third-part/bootstrap-3.3.5-dist/css/bootstrap.min.css"Rel="stylesheet"> <link href=".. /third-part/bootstrap-paginator/documentation.css"Rel="stylesheet"> <script src=".. /third-part/jquery/jquery-2.2.4.js"></script> <script src=".. /third-part/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <script src=".. /third-part/bootstrap-paginator/bootstrap-paginator.min.js"></script> <script>//Document-ready function starts$ (function () {          /*
* Render Paging component
*/
function Persppagebar (ID) {$ ("#"+ID). bootstrappaginator ({bootstrapmajorversion:3//Specify bootstrap version, default is BOOSTRAP2, if you are using BOOSTRAP3, you must specify this value. , CurrentPage:1//Current page, Totalpages:10//Total pages, Numberofpages:5//Display number of pages, Usebootstraptooltip:true//Use bootstrap hint style, Itemcontainerclass:function (type, page, current) {//hand cursor with mouse appliedreturn(page = = current)?"Active":"Pointer-cursor"; }, Onpagechanged:function (Event, Oldpage, NewPage)            {//Page changed event//Do something}}); } Persppagebar ("Pagebar");        }); //document ready function End</script> <style> </style>"padding-top:70px;"> <divclass="Container-fluid"> <divclass="Row"> <divclass="col-md-6 col-md-offset-3"> <tableclass="Table"> <thead> <tr> <th>#</th> <th> tag name </th> </tr> </thead> &L T;/table> </div> <divclass="col-md-6 col-md-offset-3 Text-center"> <ul id="Pagebar"></ul> </div> </div> </div></body>
Above is just the basic parameter application, if want to know more parameter configuration, can refer to Xia Guan net of demo.
Bootstrap page plug-in: Bootstrap-paginator