JS分页Page实现代码节选

tyzhsj

已于 2024-05-13 15:19:40 修改

阅读量1k

点赞数 27

分类专栏： Web开发文章标签： java html

于 2024-02-21 11:15:28 首次发布

本文链接：https://blog.csdn.net/tyzhsj/article/details/136207004

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript创建一个分页对象，包括处理分页逻辑（如首页、上一页、下一页、尾页、指定页跳转），以及如何根据用户选择调整每页显示的记录数。该内容适用于前端开发中处理表格或列表分页功能的场景。

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

/**
* 分页对象
*/
function Page() {

   this.list = null; // 数据列表
   this.pageNumber = 1; // 当前页数
   this.totalPage = 1; // 总页数
   this.totalRow = 0; // 总记录数
   this.pageSize = document.getElementById("page_size").value / 1; // 每页条数

   this.queryData = null; // 查询参数

   // 首页
   this.homePage = function() {
       if (this.isFirstPage()) {
           qyAlert("已是首页！");
           return;
       }
       this.pageNumber = 1;
       this.reloadData();
   }
   // 上一页
   this.prevPage = function() {
       var _pageNumber = this.pageNumber - 1;
       if (this.isFirstPage() || _pageNumber < 1) {
           qyAlert("已是第一页！");
           return;
       }
       this.pageNumber--;
       // 重新加载数据
       this.reloadData();
   }
   // 下一页
   this.nextPage = function() {
       var _pageNumber = this.pageNumber + 1;
if (this.isLastPage() || _pageNumber > this.totalPage) {
qyAlert("已是最后一页！");
return;
}
this.pageNumber++;
// 重新加载数据
       this.reloadData();
   }
   // 尾页
   this.lastPage = function() {
       if (this.isLastPage()) {
           qyAlert("已是尾页！");
           return;
       }
       this.pageNumber = this.totalPage;
       // 重新加载数据
       this.reloadData();
   }
   // 跳转到指定页
   this.jumpPage = function(_jumpPageNumber) {
       var _pageNumber = _jumpPageNumber || getIptNumVal("jump_page");
       if (!_pageNumber || isNaN(_pageNumber)) {
           qyAlert("请输入正确的页数！");
return;
       }
       if (_pageNumber < 1 || _pageNumber > this.totalPage) {
           //qyAlert("输入页数错误，超出了实际页码范围！");
           qyAlert("目标页[" + _pageNumber + "]不存在!");
           return;
       }
       if (this.pageNumber == _pageNumber) {
           qyAlert("已经是当前页!");
           return;
       }
       this.pageNumber = _pageNumber;
       // 重新加载数据
       this.reloadData();
   }
   // 是否首页
   this.isFirstPage = function() {
       return this.pageNumber == 1;
   }
   // 是否尾页
   this.isLastPage = function() {
       return this.pageNumber == this.totalPage;
   }
   // 调整每页条数
   this.changePageSize = function(_changePageSize) {
       var _pageSize = _changePageSize || getIptNumVal("page_size");
       this.pageSize = _pageSize;
       // 重新加载数据
       this.reloadData();
   }
   // 重新加载数据
   this.reloadData = function() {
       // 重新加载数据
       reloadBbmxData(this);
   }
   // 赋值和渲染分页信息
   this.setAndRender = function(jsonData) {
       if (jsonData && jsonData.list) {
           this.list = jsonData.list; // 数据列表
           this.pageNumber = jsonData.pageNumber; // 当前页数
           this.totalPage = jsonData.totalPage > 0 ? jsonData.totalPage : 1; // 总页数
           this.totalRow = jsonData.totalRow; // 总记录数
           this.pageSize = jsonData.pageSize; // 每页条数
       }
       $("#total_row").html(this.totalRow); // 总记录数
       $("#total_page").html(this.totalPage); // 总页数
       $("#current_page").html(this.pageNumber); // 当前页数
   }
}

var page = new Page(); // 创建分页对象

/**
* 获取表单的数值
* @param ipt_id 表单id
* @returns {Number} 返回表单的值
*/
function getIptNumVal(ipt_id) {
   try {
       var v_val = $("#" + ipt_id).val();
       if (isNaN(v_val)) { // 不是数字
           return 0;
       }
       v_val = Number(v_val); // Numner("")结果为0
       return v_val;
   } catch(ex) {
       return 0;
   }
}

<style type="text/css">
.button {
display: inline-block;
vertical-align: top;
text-align: center;
text-decoration: none !important;
border-radius: 3px;
margin-left: 12px;
overflow: hidden;
cursor: pointer;
line-height: 1;
background-color: #fff;
color: #53acf3;
border: 1px solid #53acf3;
padding: 9px 48px;
font-size: 16px
}

.button:first-child {
margin-left: 0
}

.button.button-sm {
padding: 7px 17px;
font-size: 12px;
margin-left: 6px;
}

.button.button-sm:first-child {
margin-left: 0
}

.button.button-xs {
padding: 5px 10px;
font-size: 12px;
margin-left: 6px;
}

.button.button-xs:first-child {
margin-left: 0
}

.button:hover {
background-color: #edf6fc;
border-color: #3e9be5;
color: #3e9be5;
text-decoration: none !important
}

.button.button-blue {
background-color: #53ACF3;
border-color: #53ACF3;
color: #FFF
}

.button.button-blue:hover {
background-color: #3e9be5;
border-color: #3e9be5
}

.button.button-disable {
background-color: #f7f7f7;
border-color: #ddd;
color: #bbb;
cursor: not-allowed
}
</style>

<div id="pager" style="margin-top: 8px; width: 99%;">
   <div class="page_left" style="float: left;">
       <span>每页</span>
       <select id="page_size" name="pageSize" οnchange="page.changePageSize();" style="width: 50px; height: 24px;">
           <option value="30">30</option>
           <option value="50">50</option>
           <option value="100">100</option>
           <option value="200">200</option>
           <option value="500">500</option>
           <option value="1000">1000</option>
       </select>
       条，共<span id="total_row">0</span>条记录
   </div>
   <div class="page_right" style="float: right;">
       <button id="home_page" class="button button-blue button-xs" οnclick="page.homePage();">首页</button>
       <button id="prev_page" class="button button-blue button-xs" οnclick="page.prevPage();">上一页</button>
       <button id="next_page" class="button button-blue button-xs" οnclick="page.nextPage();">下一页</button>
       <button id="last_page" class="button button-blue button-xs" οnclick="page.lastPage();">尾页</button>
       <span id="current_page">1</span>/<span id="total_page">1</span>页
       <input id="jump_page" name="jumpPageNumber" type="text" class="ipt" digit="0" style="width: 30px; height: 24px; padding-right: 4px;"/>
       <button id="jump_page_btn" type="button" class="button button-blue button-xs" style="margin-left: 2px;" οnclick="page.jumpPage();">跳转</button>
   </div>
</div>