js 分页

Posted 2020-09-30 吃回头草的马

<input type="hidden" id="pageIndex" name="pageIndex" value="1" />
        <input type="hidden" id="pageCount" name="pageCount" value="0" />
        <input type="hidden" id="pageSize" name="pageSize" value="6" />
        <input type="hidden" id="recordCount" name="recordCount" value="0" />


 <div id="fenye" class="badoo fenye">
                                    <div class="pageMsg">
                                        第<span class="dispalyPageIndex"></span>页，共<span id="dispalyPageCount"></span>页，每页<span id="displayPageSize"></span>条 共<span id="displaRrecordCount"></span>条
                                    </div>
                                    <div class="pageNum">
                                        <a id="firstPage">首页</a>
                                        <a id="prevPage">上一页</a>
                                        <span class="dispalyPageIndex"></span>
                                        <a id="nextPage">下一页</a>
                                        <a id="endPage">尾页</a>
                                    </div>
                                </div>

View Code

 <style type="text/css">
        #fenye {
            height: 40px;
            line-height: 40px;
        }

            #fenye .pageMsg {
                width: 40%;
                float: left;
                text-align: left;
                color: #01479d;
            }

            #fenye .pageNum {
                width: 60%;
                float: left;
                text-align: right;
            }

            #fenye a {
                margin-right: 5px;
                color: #01479d;
            }

            #fenye span {
                margin-right: 5px;
                color: #01479d;
            }

            #fenye .disabled {
                cursor: not-allowed;
                color: #989898;
            }
    </style>

View Code

if (parseInt($("#pageCount").val()) == parseInt($("#pageIndex").val())) {
                $("#nextPage,#endPage").addClass("disabled");
                $("#nextPage,#endPage").attr("href", "javascript:void(0);");
            }
            if (parseInt($("#pageCount").val()) == 1) {
                $("#firstPage,#prevPage,#nextPage,#endPage").addClass("disabled");
                $("#firstPage,#prevPage,#nextPage,#endPage").attr("href", "javascript:void(0);");
            }
            $("#fenye a").click(function () {
                var pageIndex = parseInt($("#pageIndex").val());
                var pageCount = parseInt($("#pageCount").val());
                var id = $(this).attr("id");
                var href = $(this).attr("href");
                var curr = 1;
                curr = id == "firstPage" ? 1 : parseInt(curr);
                curr = id == "endPage" ? pageCount : parseInt(curr);
                curr = id == "prevPage" ? parseInt(pageIndex - 1) : parseInt(curr);
                curr = id == "nextPage" ? parseInt(pageIndex + 1) : parseInt(curr);
                curr = curr > pageCount ? pageCount : parseInt(curr);
                curr = curr <= 0 ? 1 : parseInt(curr);
                if (href == "" || typeof (href) == "undefined") {
                    $("#pageIndex").val(curr);
                    GetContractByDept($("#DeptID").val(), ‘‘, ‘‘, ‘‘, ‘‘, ‘‘, ‘‘, $("#pageIndex").val(), $("#pageSize").val());
                }
            })

View Code

function GetContractByDept(deptid, actName, actNum, beginTime, endTime, operator, oppOperator, pageIndex, pageSize) {
            $("#ContractList tbody tr").remove();
            $("#selectAll").get(0).checked = false;
            $.ajax({
                url: ‘Action.ashx?t=GetContractByDeptId‘,
                data: { deptid: deptid, actName: actName, actNum: actNum, beginTime: beginTime, endTime: endTime, operator: operator, oppOperator: oppOperator, pageIndex: pageIndex, pageSize: pageSize },
                type: ‘POST‘,
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        $(result.data).each(function (index) {
                            var html = "";
                            html += "<tr>";
                            html += "<td><input type=‘button‘ class=‘btnPower‘ value=‘查看权限‘ data-url=‘ContractDeptUser.aspx?id=" + this.ID + "&OwnerName=" + this.OwnerDisplayName + "&OwnerTime=" + this.CreateTime + "‘ data-name=‘" + this.ContractName + "‘/></td>";
                            html += "<td><input type=‘checkbox‘ name=‘chkDname‘ value=‘" + this.ID + "‘ data-contractName=‘" + this.ContractName + "‘ /></td>";
                            html += "<td>" + this.FileType + "</td>";
                            html += "<td>" + this.ContractName + "</td>";
                            html += "<td>" + this.FileSize + "</td>";
                            html += "<td>" + this.OwnerDisplayName + "</td>";
                            html += "<td>" + this.CreateTime + "</td>";
                            html += "</tr> ";
                            $("#ContractList tbody").append(html);
                        });
                        $("#pageIndex").val(result.pageIndex);
                        $("#pageSize").val(result.pageSize);
                        $("#recordCount").val(result.recordCount);
                        $("#pageCount").val(Math.ceil(result.recordCount / result.pageSize));
                        $(".dispalyPageIndex").text(result.pageIndex);
                        $("#displayPageSize").text(result.pageSize);
                        $("#dispalyPageCount").text($("#pageCount").val());
                        $("#displaRrecordCount").text($("#recordCount").val());
                        if ($("#ContractList tbody tr").length < 1) {
                            $("#ContractList tbody").html("<tr><td colspan=‘7‘ style=‘color:red;text-align:center;‘ >暂无数据</td></tr>");
                        }
                        $("input[name=‘chkDname‘]").click(function () {
                            if (!$(this).isChecked) {
                                $("#selectAll").prop("checked", false);
                            }
                            var chsub = $("input[name=‘chkDname‘]").length;
                            var checkedsub = $("input[name=‘chkDname‘]:checked").length;
                            if (chsub == checkedsub) {
                                $("#selectAll").prop("checked", true);
                            }
                        });
                        $(".btnPower").click(function () {
                            var url = $(this).attr("data-url");
                            var name = $(this).attr("data-name");
                            layer.open({
                                type: 2,
                                title: name,
                                shadeClose: true,
                                shade: 0.4,
                                area: [‘680px‘, ‘350px‘],
                                content: url
                            });
                        })
                    } else {
                        $("#ContractList tbody").html("<tr><td colspan=‘7‘ style=‘color:red;text-align:center;‘ >暂无数据</td></tr>");
                    }
                }
            });

        }

View Code