bootstrap paginator 下载

最新推荐文章于 2019-06-21 15:55:00 发布

开发转测试

最新推荐文章于 2019-06-21 15:55:00 发布

阅读量3.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/fulq1234/article/details/89946824

版权

本文提供了Bootstrap Paginator的下载和GitHub源码链接，包括前端示例代码，适用于后台数据输出到前端分页展示的场景。

摘要由CSDN通过智能技术生成

下载页面：http://plugins.jquery.com/bootstrap-paginator/

github页面：https://github.com/lyonlai/bootstrap-paginator

后台代码格式不用固定，只要能输出前台需要的数据就行。

前台代码示例：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
</head>
<body onload="a()">
    <table class="table table-border table-hover">
        <thead>
            <tr>
                <th>xuhao</th>
                <th>xingming</th>
                <th>xingbie</th>
                <th>nianling</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="page">
        <ul class="pagination"></ul>
    </div>
</body>
<!--使用bootstrap插件必须使用引入jquery,因为bootstrap是基于jquery开发的-->
<script src="./lib/jquery.min.js"></script>
<!--bootstrap插件-->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
<!--分页插件-->
<script src="./lib/bootstrap-paginator-master/src/bootstrap-paginator.js"></script>
<script>
    let currentPage = 1;
    let pageSize = 3;
    function render() {
        $.ajax({
            url: "./setPage.php",
            data: {
              page: currentPage,
              pageSize: pageSize
            },
            dataType: "json",
            success: function (result) {
                // 将数据渲染到页面
                //$("tbody").html(template("tableTemp",{item:result}))
				//... ...根据具体情况判断


                // 调用分页函数.参数:当前所在页, 总页数(用总条数 除以 每页显示多少条,在向上取整), ajax函数
                setPage(currentPage, Math.ceil(result[0].size/pageSize), render)
            }
        })
    }
    //render()
	
	function a(){
		setPage(1, 2, a)
	}

    /**
     *
     * @param pageCurrent 当前所在页
     * @param pageSum 总页数
     * @param callback 调用ajax
     */
    function setPage(pageCurrent, pageSum, callback) {
        $(".pagination").bootstrapPaginator({
            //设置版本号
            bootstrapMajorVersion: 3,
            // 显示第几页
            currentPage: pageCurrent,
            // 总页数
            totalPages: pageSum,
            //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event,originalEvent,type,page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page
                callback && callback()
            }
        })
    }
</script>
</html>

文件bootstrap-paginator.js的内容是：

/**
 * bootstrap-paginator.js v0.5
 * --
 * Copyright 2013 Yun Lai <lyonlai1984@gmail.com>
 * --
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

(function ($) {

    "use strict"; // jshint ;_;


    /* Paginator PUBLIC CLASS DEFINITION
     * ================================= */

    /**
     * Boostrap Paginator Constructor
     *
     * @param element element of the paginator
     * @param options the options to config the paginator
     *
     * */
    var BootstrapPaginator = function (element, options) {
        this.init(element, options);
    },
        old = null;

    BootstrapPaginator.prototype = {

        /**
         * Initialization function of the paginator, accepting an element and the options as parameters
         *
         * @param element element of the paginator
         * @param options the options to config the paginator
         *
         * */
        init: function (element, options) {

            this.$element = $(element);

            var version = (options && options.bootstrapMajorVersion) ? options.bootstrapMajorVersion : $.fn.bootstrapPaginator.defaults.bootstrapMajo