boostrap分页插件css+js

来源：互联网发布：超星电子图书馆数据库编辑：程序博客网时间：2024/06/05 05:37

这个插件是写公司业务时自己弄的，样式几乎用的bootstrap原版，更改方便
使用须知（即readme.txt）：
依赖jquery.js(版本不影响)和bootstrap.css(第3版效果最佳)

直接调用bindPageControl函数即可

配置项 bindPageControl(查询参数,总数,返回函数,DOM的ID)
参数：必备pageSize和pageIndex，如果单词不同自己去改一下源代码全部替换即可，其他参数自定义
总数：查到的结果的总数量，这个后台那块应该都有弄
返回函数：分页按钮点击响应的函数
DOM的ID：为了能在一个界面使用多个翻页插件而加的参数，和html对应上就可以
示例：
html:

<nav class="text-center pageNav">    <ul id="carouse1" class="pagination" style="margin: 0">    </ul></nav>

js:

$(function () {     var param = {        pageSize: 5,        pageIndex: 1    };    initData(param);});function initData(param) {    $.get("getAllData", param, function (result) {            showPolicy(result.resultInfo.data.items);            bindPageControl(param, result.data.total, getData, "carouse1");        }    );}function getData(param) {    $.get("getData", param, function (result) {            showPolicy(result.data.list);        }    );}function showPolicy(data){    ......}

源代码：
css：

.pageNav {    position: relative;    width: 100%;    height: 8%;    margin-top: 3%;}.pagination > li > a:hover {    color: #f8f9fa;    background-color: #1C79B6;}.pagination > li > a:active, .pagination > li > a:focus {    color: #337ab7;    background-color: #fff;    border: none;}.pagination li a.page:active,.pagination li a.page:focus,.pagination li a.page:active,.pagination li a.page:focus {    color: #23527c;    background-color: #eee;}.pagination > li > a.active {    color: #f8f9fa;    background: #1C79B6;}

js：

//翻页事件function bindPageControl(data, count, event, carouseId) {    var carouse = $("#" + carouseId);    carouse.empty();    if (count !== 0) {        carouse.append('<li><a id="first" href="javascript:void(0)" title="回到首页">&laquo;</a></li>');        carouse.append('<li><a id="pre" class="btn page" href="javascript:void(0)" title="上一页">&lsaquo;</a></li>');        var pageCount = Math.ceil(count / data.pageSize);        var pageLimit = 5;        var pcount = 0;        if (pageCount <= pageLimit) {            pcount = pageCount;        } else {            pcount = pageLimit;        }        for (var i = 0; i < pcount; i++) {            carouse.append('<li><a name="' + (i + 1) + '" href="javascript:void(0)">' + (i + 1) + '</a></li>');            carouse.find("a[name]").eq(i).off("click").on("click", function () {                data.pageIndex = Number($(this).attr("name"));                event(data);                changeClass(data, carouse, $("#pre"), $("#next"), pageCount, pageLimit);            })        }        if (pcount === pageLimit) {            carouse.append('<li><a class="btn disabled" href="javascript:void(0)">···</a></li>');        }        carouse.append('<li><a id="next" class="btn page" href="javascript:void(0)" title="下一页">&rsaquo;</a></li>');        carouse.append('<li><a id="last" href="javascript:void(0)" title="最后一页">&raquo;</a></li>');        carouse.find("a[name]:eq(0)").addClass("active");        var pre = $("#pre"), next = $("#next");        changeStatus(pre, next, data.pageIndex, pageCount, pageLimit);        pre.off("click").on("click", function () {            data.pageIndex--;            event(data);            changeClass(data, carouse, pre, next, pageCount, pageLimit);        });        next.off("click").on("click", function () {            data.pageIndex++;            event(data);            changeClass(data, carouse, pre, next, pageCount, pageLimit);        });        $("#first").off("click").on("click", function () {            data.pageIndex = 1;            while (carouse.find("a[name]").eq(0).attr("name") !== String(1)) {                carouse.find("a[name]").eq(0).focus();                carouse.find("a[name]").eq(0).click();            }            carouse.find("a[name]").eq(0).click();            changeClass(data, carouse, pre, next, pageCount, pageLimit);        });        $("#last").off("click").on("click", function () {            data.pageIndex = pageCount;            while (carouse.find("a[name]").eq(-1).attr("name") !== String(pageCount)) {                carouse.find("a[name]").eq(-1).click();            }            carouse.find("a[name]").eq(-1).click();            changeClass(data, carouse, pre, next, pageCount, pageLimit);        });    }}function changeClass(data, carouse, pre, next, pageCount, pageLimit) {    changeStatus(pre, next, data.pageIndex, pageCount, pageLimit);    carouse.find(".active").removeClass("active");    carouse.find("a[name=" + data.pageIndex + "]").addClass("active");}function changeStatus(pre, next, index, count, limit) {    //count：页数 ，index：当前页号，limit：单次最大显示界面码    if (count === 1) {        pre.addClass("disabled");        next.addClass("disabled");    } else if (index === 1) {        pre.addClass("disabled");        next.removeClass("disabled");    } else if (index === count) {        next.addClass("disabled");        pre.removeClass("disabled");    } else {        pre.removeClass("disabled");        next.removeClass("disabled")    }    if (count > limit) {        var carouse = $("#carouse");        var pcount = 0;        if (index % limit === 0 && count > index) {            if (index + limit > count) {                pcount = count;            } else {                pcount = index + limit            }            var arr = [], arr2 = [];            for (var i = index, j = -1; i < pcount; i++, j--) {                arr.push(i + 1);                arr2.push(j);            }            arr.reverse();            arr.forEach(function (elem, inde) {                carouse.find("a[name]").eq(arr2[inde]).text(elem);                carouse.find("a[name]").eq(arr2[inde]).attr("name", elem);            });            var dif = limit - (pcount - index);            var last = Number(carouse.find("a[name]").eq(arr2[arr2.length - 1]).text());            arr = [];            for (var p = 0, q = last - 1; p < dif; p++, q--) {                arr.push(q);            }            arr.reverse();            arr.forEach(function (elem, inde) {                carouse.find("a[name]").eq(inde).text(elem);                carouse.find("a[name]").eq(inde).attr("name", elem);            })        }        if (carouse.find("a[name]").eq(0).text() !== "1" && carouse.find("a[name]").eq(0).is(":focus")) {            for (var n = pcount, m = 0; m < limit; n--, m++) {                var text = carouse.find("a[name]").eq(m).text();                carouse.find("a[name]").eq(m).text(Number(text) - 1);                carouse.find("a[name]").eq(m).attr("name", Number(text) - 1);            }        }        if (carouse.find("a").eq(-4).text() === count.toString()) {            next.parent().prev().remove();        } else if (Number(carouse.find("a[name]").eq(-1).text()) < count && next.parent().prev().find("a").text() !== "···") {            next.parent().before('<li><a class="btn disabled" href="javascript:void(0)">···</a></li>')        }    }}

文件地址：em。。。所有代码就在这儿了

阅读全文

0 0