zoukankan      html  css  js  c++  java
  • 9. 前端文章分页功能实现

    经过前面几篇文章的介绍,现在已经把博客后台管理和前台界面都已经搭建好了,其中前端界面是我完全手写实现的,其中分页部分是比较麻烦的,这儿简单说下我是如何完成的。分页涉及三个要素:1、请求地址;2、每页的数量;3、当前是第几页,所以我这的的做法如下:
    1. 在分页的div上添加如下属性:

    1 <div class="pageSection" addr="/home/first" rows="3" page="1">
    2     <ul>
    3     </ul>
    4 </div>
    index.html

    其中addr表示地址,rows表示每页的数量、page表示当前页索引。在页面加载时首先从后台获取要显示数据的条数,然后算出总的页数,并生成分页的标签,代码如下:

     1 $.ajax({
     2     url:"/home/firstcount",
     3     success:function(data){
     4         if(data && data.msg){
     5             var count = parseInt(data.msg);
     6             if(count > 0){
     7                 $(".pageSection ul").html("");
     8                 var rows = parseInt($(".pageSection").attr("rows"));
     9                 var temp = parseInt(count / rows);
    10                 if(temp * rows == count){
    11                     count = temp;
    12                 } else {
    13                     count = temp + 1;
    14                 }
    15                 for(var i=1; i<=count; i++){
    16                     var content = '<li class="item">' + i + '</li>';
    17                     $(".pageSection ul").append(content);
    18                 }
    19                 $(".pageSection .item:first").addClass("select");
    20                 $(".pageSection .item").mouseenter(function(){
    21                     $(this).addClass("hover");
    22                 }).mouseleave(function(){
    23                     $(this).removeClass("hover");
    24                 }).click(function(){
    25                     $(".pageSection .item").removeClass("select");
    26                     var page = $(this).text();
    27                     $(".pageSection").attr("page", page);
    28                     $(this).addClass("select");
    29                     loadArticle($(".pageSection").attr("addr"), 
    30                             $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
    31                     window.scrollTo(0,0);
    32                 });
    33                 loadArticle($(".pageSection").attr("addr"), 
    34                     $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
    35             }
    36         }
    37     }
    38 });
    39 function loadArticle(addr, rows, page){
    40     var pagedata = {};
    41     pagedata.rows = rows;
    42     pagedata.page = page;
    43     $.ajax({
    44         url:addr,
    45         type:"post",
    46         data:pagedata,
    47         success:function(data){
    48             $(".maincontainer .left .articles").html("");
    49             for(var i in data){
    50                 var content = '<div class="contentSection article">';
    51                 content += '<div class="articleTitle" addr="/articles/article/' + data[i].id + '">' + data[i].name + '</div>'
    52                 content += '<div class="articleContent">';
    53                 content += data[i].summary;
    54                 content += '</div>';
    55                 content += '<div class="articleInfo">';
    56                 content += '<span>分类:' + data[i].category.name + '</span>';
    57                 content += '<span>作者:' + data[i].author.name + '</span>';
    58                 content += '<span>时间:' + data[i].createTime + '</span>';
    59                 content += '</div>';
    60                 content += '</div>';
    61                 $(".maincontainer .left .articles").append(content);
    62             }
    63             $(".articleTitle").click(function(){
    64                 var addr = $(this).attr("addr");
    65                 window.location = addr;
    66             });
    67         }
    68     });
    69 }
    index.html

    在点击分页标签后就会通过ajax来从后台获取当前页的数据,然后加载到界面上。截图如下:

    这种方法比较笨,是反复通过ajax回调完成的,虽然没什么问题,但是在设计上是叫做Calback Hell,可以通过promise的方式来重写,但因为这只是我的博客的模板,前台界面后面会重新设计,所以这些工作就安排到以后了。今天的代码下载地址是:https://pan.baidu.com/s/1T8eDeAe8iCxK8uqOOt5YHA,密码:acmt

  • 相关阅读:
    第三方驱动备份与还原
    Greenplum 解决 gpstop -u 指令报错
    yum安装(卸载)本地rpm包的方法(卸载本地安装的greenplum 5.19.rpm)
    Java JUC(java.util.concurrent工具包)
    netty 详解(八)基于 Netty 模拟实现 RPC
    netty 详解(七)netty 自定义协议解决 TCP 粘包和拆包
    netty 详解(六)netty 自定义编码解码器
    netty 详解(五)netty 使用 protobuf 序列化
    netty 详解(四)netty 开发 WebSocket 长连接程序
    netty 详解(三)netty 心跳检测机制案例
  • 原文地址:https://www.cnblogs.com/lvniao/p/9048946.html
Copyright © 2011-2022 走看看