分页插件（一）

最新推荐文章于 2024-12-13 13:00:58 发布

cpongo11

最新推荐文章于 2024-12-13 13:00:58 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

企鹅我认为v

本文链接：https://blog.youkuaiyun.com/cpongo11/article/details/99745684

本文介绍了一个简单实用的分页插件实现方法，通过JavaScript和HTML构建动态分页导航栏，支持首页、上一页、下一页、尾页及自定义跳转功能，并附带了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的分页插件

首先上效果：

代码：

/**
 * 分页工具类
 * @author zhaochao
 * @param pageId      分页div的id
 * @param currentPage  当前页
 * @param sumPage     总页数
 * @param sumCount    总数据条数
 * @param fn         点击分页时要执行的方法，方法的第一个参数要是page
 */
function pageTool(pageId, currentPage, sumPage, sumCount, fn) {
   currentPage = currentPage == undefined || currentPage == null ? 1 : currentPage;
   sumPage = sumPage == undefined || sumPage == null ? 1 : sumPage;
   sumCount = sumCount == undefined || sumCount == null ? 0 : sumCount;
   var pageContent = 
         '<div style="float: right; font-size: 12px;margin-top: 10px;color: #999999">' +
         '<span>总计<span style="color: #ED6408;">' + sumCount + 
         '</span>个记录/共<span style="color: #ED6408;">' + sumPage + 
         '</span>页，第<span style="color: #ED6408;">' + currentPage + '</span>页</span>&nbsp;';
   if (currentPage > 1) {
      pageContent += 
         '<a href="javascript:;" id="page_1" ' + 
         'style="float: none;text-decoration: none;color: #555;width: 37px;height: 15px;">首页</a>&nbsp;'+
         '<a href="javascript:;" id="page_' + (currentPage > 1 ? currentPage - 1 : 1) + ' + 
         '" style="text-decoration: none;color: #555;">上一页</a>&nbsp;';
   }
   if (currentPage < sumPage) {
      pageContent += 
         '<a href="javascript:;" id="page_' + 
         '(currentPage < sumPage ? parseInt(currentPage) + 1 : sumPage)' + 
         '" style="text-decoration: none;color: #555;">下一页</a>&nbsp;' +
         '<a href="javascript:;" id="page_' + sumPage + 
         '" style="text-decoration: none;color: #555;">尾页</a>&nbsp;';
   }
   pageContent += 
      '|&nbsp;' +
      '<span>第<input id="page_input" type="number" min="1" max="' + sumPage + ' +
      '" style="width:40px;" value="' + currentPage + ' +
      '"/>页<button style="width:45px;text-align: center;display: inline-block;' + 
      'border: #dedfde 1px solid;background-color: #ffffff;" id="page_btn">跳转</button></span>' +
      '</div>';
   $('#' + pageId).html(pageContent);
   //绑定A鼠标移上事件
   $('#' + pageId + ' div a').hover(function () {
      $(this).attr('style', 'color: #50c08f;font-weight: bold;text-decoration: none;');
   }, function () {
      $(this).attr('style', 'color: #555;font-weight: normal;text-decoration: none;');
   });
   //绑定A点击事件
   $('#' + pageId + ' div a').click(function () {
      var pageNum = $(this).attr('id').split('_')[1];
      if (pageNum != currentPage) {
         fn(pageNum);
      }
   });
   //绑定跳转按钮事件
   $('#page_btn').hover(function () {
      $(this).attr('style', 'width:45px;border: #dedfde 1px solid;background-color: #50c08f;');
   }, function () {
      $(this).attr('style', 'width:45px;border: #dedfde 1px solid;background-color: #ffffff;');
   });
   $('#page_btn').click(function () {
      var pageNum = $('#page_input').val().trim();
      pageNum = pageNum > sumPage ? sumPage : pageNum <= 0 ? 1 : pageNum;
      if (pageNum != currentPage) {
         fn(pageNum);
      }
   });
}