html整合bootstart分页（不怎么美观但是很实用简洁）

1、现在市面上可能用HTML和js写页面的比较少了，直接来看代码吧。
①、html代码

	<nav aria-label="Page navigation" style="width: 98%;height: 98%">
		  <ul id="stPageInfo" class="pagination" style="float: right">
		  </ul>
	</nav>

②、js代码

var page = 1;     //当前页
var jsPage = 1;   //存储一个常量，只有修改的时候才会触发分页重新计算
var dicts = {};
var quytype = 1;

/**
 * 初始加载
 */
function initFun() {

    $('.datetimepicker').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',//yyyy-mm-dd hh:ii p   div的显示时间
        todayBtn: true,//今天按钮
        autoclose: true,//选中关闭
        minView: "month",//设置选择时 只显示到月份 ----day， year --不设置默认带时间 秒   日历的显示时间
        startView: "2",
        clearBtn: true// 自定义属性,true 显示 清空按钮 false 隐藏 默认:true
    });
    //默认要先获取token判断是否登录
    legal();
}

/**
 * 检查访问是否合法
 */
function legal() {
    var token = localStorage.accessToken;
    if (token) {
        //
    } else {
        alert("请登录系统！");
        window.close();
        return;
    }

    var url = '#/' + token;
    $get(url, {t: (new Date()).getTime()}, {
            success: function (data) {
                if (data && data.data) {
                    $("#body").css('display', 'block');
                    localStorage.accessToken = data.data.token;
                    $("#loginUser").html(" 欢迎您 " + data.data.name);
                    //如果成功才去调用接下来的方法（证件类型）
                    loadDicts();
                } else {
                    alert("请重新登录系统！");
                    window.close();
                    return;
                }
            },
            failure: function (code, message) {
                if(code == 401 ){
                    alert(message);
                    window.close();
                    return;
                }
                alert(message);

            }
        }
    );
}

/**
 * 加载字典数据
 */
function loadDicts() {
    var idTypeName = document.getElementById('idType');
    //获取document节点  将上一次选中的数据初始化进行覆盖
    idTypeName.innerHTML = "<option value=''>请选择</option>";

    var url = "rest/system/dict/idType";
    $get(url, {t: Date.parse(new Date())}, {
        success: function (data) {
            var data = data.data;
            for (var i = 0; i < data.length; i++) {
                //获取证件类型的 id 以及name名称。
                id = data[i].id;
                var name = data[i].name;
                dicts[id] = name;
                //将证件类型本地存储。（authDetailed.js 详情审核页面加载证件类型名称）
                localStorage.setItem(id, name);

                //加载动态的证件类型下拉框
                if (name == "身份证" || name == "港澳台居民居住证" || name == "港澳居民来往内地通行证" || name == "五年有效期台湾居民来往大陆通行证") {
                    idTypeName.innerHTML += '<option value="' + id + '">' + name + '</option>'
                }
            }
            //获取名族
            nationDicts();
        }
    });
}

//加载名族字典
function nationDicts() {

    var url = "# ";
    $get(url, {t: (new Date()).getTime()}, {
        success: function (data) {
            var nationData = data.data;
            for (var i = 0; i < nationData.length; i++) {
                //获取证件类型的 id 以及name名称。
                var nationId = nationData[i].id;
                var nationName = nationData[i].name;
                //dicts[id] = name;
                //将证件类型本地存储。（authDetailed.js 详情审核页面加载证件类型名称）
                localStorage.setItem(nationId, nationName);
            }
            //已经进行了用户判断，获取证件类型，名族然后在调用查询待人工审核
            checkPending();
        }
    });
}

/**
 * 点击查询按钮
 */
function queryBtnData() {
    page = 1;
    jsPage = 1;
    $("#dataView").html("");
    queryData();
}

/**
 * 加载需要数据
 */
function queryData() {

    params = {
        page: page,
        pageSize:100,
        name: $("#name").val(), 
        atBenTime: $("#beginTime1").val() ? $("#beginTime1").val() + "  00:00:00" : "",
        atEndTime: $("#endTime1").val() ? $("#endTime1").val() + " 23:59:59" : "",
        t: (new Date()).getTime()
    };


    var url = '#';
    $get(url, params, {
            success: function (data) {
                if (data && data.data) {
                    if (data.data.size == 0) {
                        addEmpty();
                        return;   //主要作用是防止size为0还继续 往下执行导致报错。
                    }
                    if (jsPage == 1) {
                        //计算分页组件
                        initPage(Math.ceil(data.data.size / 10));
                        jsPage = 0;
                    }

                    viewData(data.data);
                } else {
                    alert("数据加载失败！");
                    window.close();
                    return;
                }
            },
            failure: function (code, message) {
                if(code == 401 ){
                    alert(message);
                    window.close();
                    return;
                }
                alert(message);
            }
        }
    );
}

/**
 * 加载无数据提示
 */
function addEmpty() {
    var info =
        "<tr>" +
        "<td style='text-align: center;' colspan='8'>无数据</td>" +
        "</tr>";

    $("#dataView").html(info);
    $('#pageInfo').html('')
}

/**
 * 计算分页组件
 * @param totalPages
 */
function initPage(totalPages) {
    $('#pageInfo').bootstrapPaginator({
        currentPage: 1,//当前的请求页面。
        totalPages: totalPages,//一共多少页。
        size: "normal",//应该是页眉的大小。
        bootstrapMajorVersion: 3,//bootstrap的版本要求。
        alignment: "right",
        numberOfPages: 10,//一页列出多少数据。
        itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page) {
            // location.href = "?page="+page;
            setPage(page);
        }
    });
}

function setPage(p) {
    page = p;
    queryData();
}

/*
* 遍历从接口中获取的数据
* */
function viewData(data) {
    dataMap = new Array();
    $("#dataView").html("");
    for (var i = 0; i < data.result.length; i++) {
        addTeacher(data.result[i]);
    }
}

/**
 * 增加单行数据
 */
function addTeacher(result) {
 
    if (result.an == "" || result.an == null || result.an == undefined) {
        result.an = "";
    } 
    
    var info =
        "<tr>" +
        "<td>" + dicts[result.idType] + "</td>" + 
        "</tr>";

    $("#dataView").append(info);
}