纯原生js做分页

最新推荐文章于 2023-02-22 09:53:09 发布

_无往而不胜_

最新推荐文章于 2023-02-22 09:53:09 发布

阅读量1k

点赞数 1

分类专栏： java 文章标签：纯原生js做分页分页 js

本文链接：https://blog.csdn.net/qq_15204179/article/details/89066064

版权

java 专栏收录该内容

348 篇文章 10 订阅

订阅专栏

纯原生js做分页

建议用 text/x-jquery-tmpl模板做分页查询,自己写纯js太烦了:

text/x-jquery-tmpl做分页查询_苏凯的博客-CSDN博客_jquery tmpl 分页

底层数据库是sqlserver 分页SQL语句与mysql是不同的可下载我资源看看

1.SpringMVC+Mybatis实现的SqlServer整合逆向工程Example类分页带条件数据查询_springbootsqlserver分页-Java文档类资源-CSDN下载

2.基于ssmSQLserver高级分页查询，全网最优，返回形式简单，移植和扩建改动非常少-Java代码类资源-CSDN下载

做第一个页面时是需要花费很多时间的还需要包括各种调试,样式的更改,之后在做其它页面的分页就快了,都是用同一种.

html页面:

<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>液化天然气车用气瓶智慧监测系统</title>
    <link rel="icon" type="image/x-icon" href="/assets/i/favicon.ico"/>
    <link rel="stylesheet" href="/assets/newPageJs/css/reset.css">
    <link rel="stylesheet" href="/assets/newPageJs/css/style.css">

    <script src="/assets/newPageJs/js/jQuery.js"></script>
</head>
<body>

<!--nave-->

<jsp:include page="../common/newMenu.jsp"></jsp:include>
<!--header-->

<jsp:include page="../common/newTop.jsp"></jsp:include>
<!--main-->
<div class="over-auto">
    <div class="m-main">
        <div class="f-cb">
            <div class="m-title">车队管理</div>
            <a href="javascript:selectFVehGroup();" class="modify fr"><img
                    src="/assets/newPageJs/img/a9.svg" alt="">增加车队</a>
        </div>
        <div class="stit">查询条件</div>
        <div class="kk-box sp information">
            <form action="##" method="post" id="stuForm">
                <%-- 预留所属车队车询--%>
                <input name="fVehgroupname" type="hidden" id="fVehgroupname"
                       value=""/>
                <input type="text" value="" name="pageNow" id="pageNow"
                       style="display:none;"/>
                <input type="hidden" value="" name="pageSize1" id="pageSize1"/>
                <input type="hidden" name="orderByClause" id="orderByClause"
                       value=""/>
                <div class="same-bx mar-fr ">
                    <div class="te">车队名</div>
                    <input class="pt hover" type="text" name="vehgroupname"
                           id="vehgroupname" value="">
                </div>
                <input value="查询" class="submit mar-fr" type="button"
                       onclick="go()"/>
            </form>
        </div>
        <div class="kk-box information">
            <div class="autobox">
                <table id="table">
                    <thead id="thead" class="">
                    <tr>
                        <th width="50px">&nbsp;&nbsp;&nbsp;序号</th>
                        <th data-type="string" class="text-cen"
                            id="vehgroupnameOrderByClause"
                            style=" cursor:pointer"
                            onmousemove="changeColor(this)"
                            onmouseleave="changeColorBack(this)">车队名


                        </th>
                        <th data-type="string" class="text-cen"
                            id="contactOrderByClause" style=" cursor:pointer"
                            onmousemove="changeColor(this)"
                            onmouseleave="changeColorBack(this)">联系人


                        </th>
                        <th data-type="string" class="text-cen"
                            id="fvehgroupnameOrderByClause"
                            style=" cursor:pointer"
                            onmousemove="changeColor(this)"
                            onmouseleave="changeColorBack(this)">上级车队
                        </th>
                        <th class="text-cen">
                            操作<%--<img class="cur" src="/assets/newPageJs/img/a11.svg" alt="" />--%>

                        </th>
                    </tr>
                    </thead>
                    <tbody id="tbody" class="">

                    </tbody>
                </table>
            </div>
            <div class="page" id="vehiclePage">

                <%--<div class="frr fr" id="vehiclePage">

                </div>--%>
            </div>
        </div>
    </div>
</div>
<%--====================================================遮罩========================================================--%>
<input type="hidden" id="messageValueOK" name="messageValue" value="">
<input type="hidden" id="messageValueError" name="messageValue" value="">
<input type="hidden" id="messageValue" name="messageValue" value="">
<input type="hidden" id="vehgroupId" name="vehgroupId" value="">
<input type="hidden" id="vehgroupid" name="vehgroupid" value="">
<input type="hidden" id="value" name="value" value="">
<input type="hidden" id="url" name="url" value="">
<input type="hidden" id="dataJ" name="dataJ" value="">
<input type="hidden" id="data1" name="data1" value="">
<input type="hidden" id="txt" name="txt" value="">
<input type="hidden" id="createVehgroupId" name="createVehgroupId" value="">
<input type="hidden" id="fVehgroupid" name="fVehgroupid" value="">

<input class="sgBtn" id="btn4" type="hidden" value="弹窗4(自定义)">
<input class="sgBtn" id="btn5" type="hidden" value="弹窗5(自定义)">
<input class="sgBtn" id="btn7" type="hidden" value="弹窗7(自定义)">

<input class="sgBtn" id="btn1" type="hidden" value="弹窗1(自定义)">
<input class="sgBtn" id="btn2" type="hidden" value="弹窗2(自定义)">
<input class="sgBtn" id="btn3" type="hidden" value="弹窗3(自定义)">

<input class="sgBtn" id="btn8" type="hidden" value="弹窗1(自定义)">
<input class="sgBtn" id="btn9" type="hidden" value="弹窗2(自定义)">
<input class="sgBtn" id="btn10" type="hidden" value="弹窗3(自定义)">

<script src="/assets/js/system/DJMask.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/xcConfirm.css"/>
<script src="/assets/js/jquery-1.9.1.js" type="text/javascript"
        charset="utf-8"></script>
<script src="/assets/js/xcConfirm.js" type="text/javascript"
        charset="utf-8"></script>
<style type="text/css">
    .sgBtn {
        width: 135px;
        height: 35px;
        line-height: 35px;
        margin-left: 10px;
        margin-top: 10px;
        text-align: center;
        background-color: #0095D9;
        color: #FFFFFF;
        float: left;
        border-radius: 5px;
    }
</style>
<%--<link href="/assets/css/index.css" rel="stylesheet"/>--%>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/assets/js/jquery-DJMask.2.1.1.js"
        charset="UTF-8"></script>
<%--================================================================================================================--%>
</body>
<script src="/assets/newPageJs/js/main.js"></script>
<script src="/assets/js/cm/configuration_management.js"></script>
</html>

分页js

$(".c-nav .ed").find("li").eq(3).addClass("cur")
$(".c-nav .ed").find("li").eq(3).find(".abx").eq(4).addClass("cur")


/*----------------------------------------------页面显示数据---------------------------------------------------------*/
function pageNowRendering(data) {
    var totalCount = data.totalCount;
    var totalPageCount = data.totalPageCount;
    var pageNow = data.pageNow;
    var pageSize = data.pageSize;
    var prevPage = data.prevPage;
    var nextPage = data.nextPage;
    var TACITLY_VEHGROUP = data.field;
    //向页面传入 锁定车队id
    var GPS_LOCKED_VEHGROUP = data.field3;
    //向页面传入 到期车队id
    var GPS_EXPIRE_VEHGROUP = data.field4;


    var tbody = "";
    for (var j = 0; j < data.list.length; j++) {
        if (null == data.list[j].fVehGroupMain && null != data.list[j].vehGroupMain) {
                tbody += "<tr>" +
                    "<td width=\"50px\"> &nbsp;&nbsp;&nbsp; " + ((pageNow - 1) * pageSize + j + 1) + "</td>" +
                    "<td class=\"text-cen\">" +
                    data.list[j].vehGroupMain.vehgroupname +
                    "</td>" +
                    "<td class=\"text-cen\">" +
                    data.list[j].vehGroupMain.contact +
                    "</td>" +
                    "<td class=\"text-cen\">" +
                    "无上级车队" +
                    "</td>" +

                    "<td width=\"60\" class=\"spr\">" +
                    "<div class=\"am-btn-toolbar\">" +
                    "<div class=\"am-btn-group am-btn-group-xs\">" +
                    "<a class=\"\" role=\"button\" href=\"javascript:UpdateGroupCar(" + data.list[j].vehGroupMain.vehgroupid + "," + 0 + "," + pageNow + ")\">查看详情</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                    "<a class=\"\" role=\"button\"  href=\"javascript:no()\">无上级车队</a>&nbsp;&nbsp;" +
                    "<a class=\"\" role=\"button\"  href=\"javascript:no1()\">更新上级车队</a>" +
                    "</div>" +
                    "</div>" +
                    "</td>" +
                    "</tr>";


            } 

        
    var vehiclePage = "<div class=\"fll fl\">" +
        "<span style=\"font-size: 13px\">" +
        "共有<span class=\"goodscount\" style=\"\" id=\"pageVehicleList.totalCount\">" + totalCount + "</span>条数据," +
        "共<span class=\"goodstotal\" style=\"\" id=\"pageVehicleList.totalPageCount\"  >" + totalPageCount + "</span>页," +
        "当前第<span class=\"goodsnoenum\" style=\"\" id=\"pageVehicleList.pageNow\">" + pageNow + "</span>页" +
        "</span>&nbsp;" +
        "</div>" +
        "<div class=\"frr fr\">" +
        "<a href=\"javascript:go(" + 1 + ")\" class=\"pre\">首页</a>" +
        "<a href=\"javascript:go(" + prevPage + ")\" class=\"pre\">« 上一页</a>" +
        "<a href=\"javascript:go(" + nextPage + ")\" class=\"next\">下一页 »</a>" +
        /*"<a href=\"\"  class=\"topage\" name=\"\">跳转至</a>" +*/
        "跳转至:&nbsp;" +
        "<input type=\"number\"  min=\"1\" max=\"" + totalPageCount + "\"  name =\"pageNow1\" id=\"pageNow1\" class=\"inp\" style='width: 60px'>&nbsp;" +
        "<input class=\"sub\" value=\"GO\" type=\"button\" onclick=\"go()\">" +
        "<a href=\"javascript:go(" + totalPageCount + ")\" class=\"lastNum\">尾页 </a>" +
        pageSizeNumText() +
        "</div>";


    Rendering(tbody, vehiclePage);

    function pageSizeNumText() {
        var pageSizeNumText = "";
        if ("12" == pageSize) {
            pageSizeNumText = "<select class=\"inp\"  name = \"pageSize\" id = \"pageSize\" onchange=\"go();\" class=\"inp\" style='height: 29.95px'>" +
                "<option value=\"\" ></option>" +
                "<option value=\"12\" selected=\"selected\">12</option>" +
                "<option value=\"20\" >20</option>" +
                "<option value=\"50\" >50</option>" +
                "</select>";
        } else if ("20" == pageSize) {
            pageSizeNumText = "<select name = \"pageSize\" id = \"pageSize\" onchange=\"go();\" class=\"inp\" style='height: 29.95px'>" +
                "<option value=\"\" ></option>" +
                "<option value=\"12\" >12</option>" +
                "<option value=\"20\" selected=\"selected\">20</option>" +
                "<option value=\"50\" >50</option>" +
                "</select>";
        } else if ("50" == pageSize) {
            pageSizeNumText = "<select name = \"pageSize\" id = \"pageSize\" onchange=\"go();\" class=\"inp\" style='height: 29.95px' >" +
                "<option value=\"\" ></option>" +
                "<option value=\"12\" >12</option>" +
                "<option value=\"20\" >20</option>" +
                "<option value=\"50\" selected=\"selected\" >50</option>" +
                "</select>";
        } else {
            pageSizeNumText = "<select name = \"pageSize\" id = \"pageSize\" onchange=\"go();\" class=\"inp\" style='height: 29.95px' >" +
                "<option value=\"\" ></option>" +
                "<option value=\"12\" selected=\"selected\" >12</option>" +
                "<option value=\"20\" >20</option>" +
                "<option value=\"50\" >50</option>" +
                "</select>";
        }
        return pageSizeNumText;
    }

    function Rendering(tbody, vehiclePage) {

        $("#tbody").html(tbody);
        $("#vehiclePage").html(vehiclePage);
    }
}

$(function () {


    getAllpage();

});

function go(pagNow) {
    $("#pageSize1").val($("#pageSize").val());
    var totalPageCount = document.getElementById("pageVehicleList.totalPageCount").innerText;
    var skipPageNow = $("#pageNow1").val();
    var pageNow1 = null;
    if (null != skipPageNow && ((totalPageCount - 0) >= (skipPageNow - 0)) && 1 <= (skipPageNow - 0)) {
        document.getElementById("pageNow").value = skipPageNow;
        document.getElementById("pageNow1").value = skipPageNow;
        pageNow1 = skipPageNow;
    } else if (null != skipPageNow && ((totalPageCount - 0) < (skipPageNow - 0))) {
        document.getElementById("pageNow").value = totalPageCount;
        document.getElementById("pageNow1").value = totalPageCount;
        pageNow1 = totalPageCount;
    } else if (null != skipPageNow && (1 > (skipPageNow - 0))) {
        document.getElementById("pageNow").value = 1;
        document.getElementById("pageNow1").value = 1;
        pageNow1 = 1;
    }
    if (null != pagNow || null == skipPageNow) {
        document.getElementById("pageNow").value = pagNow;
        document.getElementById("pageNow1").value = pagNow;
        pageNow1 = pagNow;
    }
    /*sessionStorage.setItem('pageNow',pageNow1);*/
    getAllpage();
}

function getAllpage() {

    /*   alert($("#vehgroupname").val());
       alert($("#pageNow").val());*/
    //车队
    var vehgroupname1 = sessionStorage.getItem('vehgroupname1');
    if (null != vehgroupname1 && 0 < vehgroupname1.length) {
        $("#vehgroupname").val(vehgroupname1);
        sessionStorage.removeItem('vehgroupname1');
    }
    //进入详情返回页面时定页面
    var pagNow = sessionStorage.getItem('pagNow');
    if (null != pagNow && 0 < pagNow) {
        $("#pageNow").val(pagNow);

    }
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/config/showVehGroupMainManage1",//url
        data: $("#stuForm").serialize(),
        success: function (data) {
            console.log("ajax:" + data);

            if (data.resultCode == 200) {
                pageNowRendering(data);
            }
            ;
        },
        error: function () {
            /*alert("异常！");*/
        }

    });
    //进入详情返回页面时定页面(清除session)
    var pagNow = sessionStorage.getItem('pagNow');
    if (null != pagNow && 0 < pagNow) {
        sessionStorage.removeItem('pagNow');
    }
}

/*================================================以上都是与查询和分页有关===========================================*/

/*================================================不能解除初始车队（提示）=========================================================*/
function no() {
    DJMask.msg("不能解除初始车队！");
}

function no1() {
    DJMask.msg("锁定或到期车队不能修改其上级车队！");
}

function no2() {
    DJMask.msg("不能修改其上级车队！");
}

/*================================================查看详情=========================================================*/
function UpdateGroupCar(vehgroupid, fVehgroupid, pagNow) {
    //车队
    var vehgroupname1 = $("#vehgroupname").val();
    if (null != vehgroupname1 && 0 < vehgroupname1.length) {
        sessionStorage.setItem('vehgroupname1', vehgroupname1);//设置session
    }
    //进入详情返回页面时定页面
    if (null != pagNow && 0 < pagNow) {
        sessionStorage.setItem('pagNow', pagNow);//设置session
    }
    if (null != fVehgroupid && 0 < fVehgroupid) {
        window.location.href = '/config/showVehGroupMainAndFvehGroup?vehgroupid=' + vehgroupid + '&fVehgroupid=' + fVehgroupid;
    } else {
        window.location.href = '/config/showVehGroupMainAndFvehGroup?vehgroupid=' + vehgroupid;
    }

}


/*================================================删除车队js=============================================================*/
function deletee(vehgroupid, j, vehgroupname) {
    $("#vehgroupId").val(vehgroupid);
    $("#btn7").click();
}

/*================================================解除上级父车队=========================================================*/
function deleteVehgroup(vehgroupid, fVehgroupid) {
    $("#vehgroupId").val(vehgroupid);
    $("#fVehgroupid").val(fVehgroupid);
    $("#btn1").click();

}


/*================================================增加js（增加车队前请先选择父车队）=========================================================*/
function selectFVehGroup() {
    //进入详情返回页面时定页面
    var pageNow = $("#pageNow").val();
    if (null != pageNow && 0 < pageNow) {
        sessionStorage.setItem('pagNow', pageNow);//设置session
    }
    //车队
    var vehgroupname1 = $("#vehgroupname").val();
    if (null != vehgroupname1 && 0 < vehgroupname1.length) {
        sessionStorage.setItem('vehgroupname1', vehgroupname1);//设置session
    }
    window.location.href = '/cm/configuration_add_car';

}


/*================================================修改上级父车队=====更新车队====================================================*/
function updateVehgroup(vehgroupid, vehgroupname) {

    window.location.href = '/cm/configuration_selectUpVehGroup_car?vehgroupid=' + vehgroupid + "&" + "vehgroupname=" + encodeURI(encodeURI(vehgroupname));


}

/*================================================弹出框 =========================================================*/
/*删除车队*/
$(function () {
    /*添加提示框和js逻辑*/
    $("#btn7").click(function () {
        var vehgroupid = $("#vehgroupId").val();
        var txt = "确定删除车队!";
        var option = {
            title: "删除车队",
            btn: parseInt("0011", 2),
            onOk: function () {
                console.log("确认啦");
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/config/delete-VehGroupMain",//url
                    data: {"vehgroupid": vehgroupid},
                    success: function (data) {
                        if (data.resultCode == 200) {
                            $("#messageValue").val("车队删除成功！");
                            $("#btn5").click();
                        }
                        ;
                        if (data.resultCode == 505) {
                            var str = data.failDesc.split(';');
                            var s = '';
                            for (var i = 0; i < str.length; i++) {
                                s = s + str[i] + '\n';
                            }
                            $("#messageValue").val(s);
                            $("#btn4").click();

                        }
                        ;
                    },
                    error: function () {
                        DJMask.msg("异常！删除失败！\n");
                        getAllpage();
                    }
                });

            }
        }
        window.wxc.xcConfirm(txt, "custom", option);
    });
    /* 成功提示*/
    $("#btn5").click(function () {
        var txt = $("#messageValue").val();
        var title = $("#title").val();
        var option = {
            title: "删除车队",
            btn: parseInt("0012", 2),
            onOk: function () {
                getAllpage();

            }
        }
        window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success, option);
    });
    /* 错误提示*/
    $("#btn4").click(function () {

        var txt = $("#messageValue").val();
        var title = "删除车队";
        var option = {
            title: title,
            btn: parseInt("0012", 2),
            onOk: function () {
                getAllpage();
            }
        }
        window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error, option);
    });
});


/*解除绑定车队*/
$(function () {
    /*添加提示框和js逻辑*/
    $("#btn1").click(function () {
        var vehgroupid = $("#vehgroupId").val();
        var fVehgroupid = $("#fVehgroupid").val();
        var txt = "确定解除上级车队？";
        var option = {
            title: "解除上级车队",
            btn: parseInt("0011", 2),
            onOk: function () {
                console.log("确认啦");
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/config/delete-CnfigVehGroupDetail",//url
                    data: {"vehgroupid": vehgroupid, "fVehgroupid": fVehgroupid},
                    success: function (data) {
                        console.log("ajax:" + data);
                        if (data.resultCode == 200) {
                            $("#messageValue").val("解除上级车队成功！\n");
                            $("#btn2").click();
                        }
                        ;
                        if (data.resultCode == 505) {
                            $("#messageValue").val("解除上级车队失败！\n");
                            $("#btn3").click();
                        }
                        ;
                    },
                    error: function () {
                        alert("异常！");
                        $("#messageValue").val("异常！");
                        $("#btn3").click();
                    }

                });

            }
        }
        window.wxc.xcConfirm(txt, "custom", option);
    });
    /* 成功提示*/
    $("#btn2").click(function () {
        var txt = $("#messageValue").val();
        var title = $("#title").val();
        var option = {
            title: "解除上级车队",
            btn: parseInt("0012", 2),
            onOk: function () {
                getAllpage();
            }
        }
        window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success, option);
    });
    /* 错误提示*/
    $("#btn3").click(function () {
        var txt = $("#messageValue").val();
        var title = "解除上级车队";
        var option = {
            title: title,
            btn: parseInt("0012", 2),
            onOk: function () {
                getAllpage();
            }
        }
        window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error, option);
    });
});


/*==================================排序==============================================================================*/
//车队名



var j = 0;
$("#vehgroupnameOrderByClause").click(function () {
    j = (j == 2) ? 0 : j;
    switch (j) {
        case 0:
            $("#orderByClause").val("vehgroupname ASC");
            go();
            break;
        case 1:
            $("#orderByClause").val("vehgroupname DESC");
            go();

    }
    j += 1;
});
//联系人



var z = 0;
$("#contactOrderByClause").click(function () {
    z = (z == 2) ? 0 : z;
    switch (z) {
        case 0:
            $("#orderByClause").val("contact ASC");
            go();
            break;
        case 1:
            $("#orderByClause").val("contact DESC");
            go();

    }
    z += 1;
});
//上级车队名（因在代码中实现的关联查询所有车队是不支持排序，）



var e = 0;
$("#fvehgroupnameOrderByClause").click(function () {
    e = (e == 2) ? 0 : e;
    switch (e) {
        case 0:
            DJMask.msg("上级车队名：当前页排序！");

            break;
        case 1:
            DJMask.msg("上级车队名：当前页排序！");
    }
    e += 1;
});


/*==================================局部排序==============================================================================*/
var tbody = document.querySelector('#table').tBodies[0];
var th = document.querySelector('#table').tHead.rows[0].cells;
var td = tbody.rows;

th[3].flag = 1;
th[3].onclick = function () {
    sort(this.getAttribute('data-type'), this.flag, this.cellIndex);
    this.flag = -this.flag;
};

function sort(str, flag, n) {
    var arr = []; //存放DOM
    for (var i = 0; i < td.length; i++) {
        arr.push(td[i]);
    }
    ;
    //排序
    arr.sort(function (a, b) {
        return method(str, a.cells[n].innerHTML, b.cells[n].innerHTML) * flag;
    });
    //添加
    for (var i = 0; i < arr.length; i++) {
        tbody.appendChild(arr[i]);
    }
    ;
};

//排序方法
function method(str, a, b) {
    switch (str) {
        case 'num': //数字排序
            return a - b;
            break;
        case 'string': //字符串排序



            return a.localeCompare(b);
            break;
        default:  //日期排序，IE8下'2012-12-12'这种格式无法设置时间，替换成'/'
            return new Date(a.split('-').join('/')).getTime() - new Date(b.split('-').join('/')).getTime();

    }
    ;
};

/*=================================================选择列颜色显示===============================================================*/

function changeColor(x) {
    x.style.background = '#F0F0F0';
}

function changeColorBack(x) {
    x.style.background = 'white';
}

sessionStorage对象是保存用户输入框的数据,当用户选择下一页等操作是输入框中内容保持不变

page类

package com.tc.common.page;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

/**
 * Project Name: 液化天然气车用气瓶智慧监测系统
 * <p>
 * FileName: Page
 * Author:    苏凯
 * Date:     2018/2/6 19:22
 * Description: 分页组件
 *
 * @version 1.0.0
 * @since: 1.0.0






 */
public class Page<T> implements Serializable
{
    private static final long serialVersionUID = -3198048449643774660L;

    /**
     *  对象集合
     */
    private List<T> list = new ArrayList<T>();
    /**
     *  对象集合2
     */
    private List<T> list2 = new ArrayList<T>();
    private int pageNow = 1; // 当前页数

    private int pageSize = 12; // 每页显示记录的条数


    private int totalCount; // 总的记录条数

    private int totalPageCount; // 总的页数

    @SuppressWarnings("unused")
    private int startPos; // 开始位置，从0条数据开始查询 共查询（startPos+pageSize）条数据

    //首页
    private int firstPage = 1;
    //上一页


    private int prevPage;

    //下一页


    private int nextPage;

    //带参数去页面
    private int field;
    //带参数去页面
    private int field2;
    //带参数去页面
    private int field3;
    //带参数去页面
    private int field4;
    //带参数去页面
    private String fieldString;
    //共操作多少条数据
    private int zNum;
    //共成功多少条数据
    private int cSum;
    //错误数据的提示


    private String failDesc = "";
    //成功状态码
    private int resultCode;
    @SuppressWarnings("unused")
    private boolean hasFirst; // 是否有首页


    @SuppressWarnings("unused")
    private boolean hasPre; // 是否有前一页


    @SuppressWarnings("unused")
    private boolean hasNext; // 是否有下一页


    @SuppressWarnings("unused")
    private boolean hasLast; // 是否有最后一页


    //状态码
    public int getResultCode()
    {
        return resultCode;
    }

    public void setResultCode(int resultCode)
    {
        this.resultCode = resultCode;
    }

    /**
     * 通过构造函数 传入  总记录数  和  当前页





     */
    public Page()
    {

    }

    /**
     * 通过构造函数 空





     *
     * @param totalCount
     * @param pageNow
     */
    public Page(int totalCount, int pageNow)
    {
        this.totalCount = totalCount;
        this.pageNow = pageNow;

    }

    /**
     * 通过构造函数





     *@param zNum       共操作多少条数据
     *@param cSum       共成功多少条数据
     *@param failDesc   错误数据的提示





     *@param resultCode 成功状态码
     */
    public Page(int zNum, int cSum, int resultCode, String failDesc)
    {
        this.zNum = zNum;
        this.cSum = cSum;
        this.resultCode = resultCode;
        this.failDesc = failDesc;

    }

    /**
     * 取得总页数，总页数=总记录数/总页数





     *
     * @return
     */
    public int getTotalPageCount()
    {
        totalPageCount = getTotalCount() / getPageSize();
        return (totalCount % pageSize == 0) ? totalPageCount
                : totalPageCount + 1;
    }

    public static long getSerialVersionUID()
    {
        return serialVersionUID;
    }

    public void setFirstPage(int firstPage)
    {
        this.firstPage = firstPage;
    }

    public void setPrevPage(int prevPage)
    {
        this.prevPage = prevPage;
    }

    public void setNextPage(int nextPage)
    {
        this.nextPage = nextPage;
    }

    public String getFieldString()
    {
        return fieldString;
    }

    public void setFieldString(String fieldString)
    {
        this.fieldString = fieldString;
    }

    public int getField3()
    {
        return field3;
    }

    public void setField3(int field3)
    {
        this.field3 = field3;
    }

    public int getField4()
    {
        return field4;
    }

    public void setField4(int field4)
    {
        this.field4 = field4;
    }

    public int getField2()
    {
        return field2;
    }

    public void setField2(int field2)
    {
        this.field2 = field2;
    }

    public int getField()
    {
        return field;
    }

    public void setField(int field)
    {
        this.field = field;
    }

    public List<T> getList2()
    {
        return list2;
    }

    public void setList2(List<T> list2)
    {
        this.list2 = list2;
    }

    public void setTotalPageCount(int totalPageCount)
    {
        this.totalPageCount = totalPageCount;
    }

    public int getPageNow()
    {
        return pageNow;
    }

    public void setPageNow(int pageNow)
    {
        this.pageNow = pageNow;
    }

    public int getPageSize()
    {
        return pageSize;
    }

    public void setPageSize(int pageSize)
    {
        this.pageSize = pageSize;
    }

    public int getTotalCount()
    {
        return totalCount;
    }

    public void setTotalCount(int totalCount)
    {
        this.totalCount = totalCount;
    }

    /**
     * 取得选择记录的初始位置





     *
     * @return
     */
    public int getStartPos()
    {
        return (pageNow - 1) * pageSize;
    }

    public void setStartPos(int startPos)
    {
        this.startPos = startPos;
    }

    /**
     * 是否是第一页





     *
     * @return
     */
    public boolean isHasFirst()
    {
       /* return (pageNow == 1) ? false : true;*/
        return (pageNow == 1) ? true : false;
    }

    public void setHasFirst(boolean hasFirst)
    {
        this.hasFirst = hasFirst;
    }

    /**
     * 是否有首页





     *
     * @return
     */
    public boolean isHasPre()
    {
        // 如果有首页就有前一页，因为有首页就不是第一页


        return isHasFirst() ? true : false;
    }

    public void setHasPre(boolean hasPre)
    {
        this.hasPre = hasPre;
    }

    /**
     * 是否有下一页





     *
     * @return
     */
    public boolean isHasNext()
    {
        // 如果有尾页就有下一页，因为有尾页表明不是最后一页


        return isHasLast() ? true : false;
    }

    public void setHasNext(boolean hasNext)
    {
        this.hasNext = hasNext;
    }

    /**
     * 是否有尾页





     *
     * @return
     */
    public boolean isHasLast()
    {
        // 如果不是最后一页就有尾页


        return (pageNow == getTotalCount()) ? false : true;
    }

    public void setHasLast(boolean hasLast)
    {
        this.hasLast = hasLast;
    }

    public void setList(List<T> list)
    {
        this.list = list;
    }

    public List<T> getList()
    {
        return list;
    }

    /**
     * 首页
     */
    public int getFirstPage()
    {
        return firstPage;
    }

    /**
     * 上一页





     */
    public int getPrevPage()
    {
        if (1 >= this.pageNow)
        {
            return prevPage = this.pageNow;
        }
        else
        {
            return prevPage = this.pageNow - 1;
        }

    }

    /**
     * 下一页





     */
    public int getNextPage()
    {
        if (getTotalPageCount() <= this.pageNow)
        {
            return nextPage = getTotalPageCount();
        }
        else
        {
            return nextPage = this.pageNow + 1;
        }

    }

    public int getzNum()
    {
        return zNum;
    }

    public void setzNum(int zNum)
    {
        this.zNum = zNum;
    }

    public int getcSum()
    {
        return cSum;
    }

    public void setcSum(int cSum)
    {
        this.cSum = cSum;
    }

    public String getFailDesc()
    {
        return failDesc;
    }

    public void setFailDesc(String failDesc)
    {
        this.failDesc = failDesc;
    }

    @Override
    public String toString()
    {
        return "Page{"
                + "对象/list=" + list
                + ", 当前页数/pageNow=" + pageNow
                + ", 每页显示记录的条数/pageSize=" + pageSize
                + ", 总的记录条数/totalCount=" + totalCount
                + ", 总的页数/totalPageCount=" + totalPageCount
                + ", 开始位置，从0开始/startPos=" + startPos
                + ", 首页/firstPage=" + firstPage
                + ", 上一页/prevPage=" + prevPage
                + ", 下一页/nextPage=" + nextPage
                + ", 共操作多少条数据/zNum=" + zNum
                + ", 共成功多少条数据/cSum=" + cSum
                + ", 错误数据的提示/failDesc='" + failDesc + '\''
                + ", 成功状态码/resultCode=" + resultCode
                + ", 是否有首页/hasFirst=" + hasFirst
                + ", 是否有前一页/hasPre=" + hasPre
                + ", 是否有下一页/hasNext=" + hasNext
                + ", 是否有最后一页/hasLast=" + hasLast
                + '}';
    }
}

_无往而不胜_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
纯原生js做分页

纯原生js做分页建议用 text/x-jquery-tmpl模板做分页查询,自己写纯js太烦了:https://blog.csdn.net/qq_15204179/article/details/88567666底层数据库是sqlserver 分页SQL语句与mysql是不同的可下...
复制链接

扫一扫