zoukankan      html  css  js  c++  java
  • 使用原生js实现前端分页功能

    背景:

    从后台提取出来数据,在前端进行分页。

    代码:

    user-manage.js

    window.onload = function(){
        var result = {
            message : "get all users successfully",
            status: "success",
            data:[
                 "1",
                 "2",
                 "3",
                 "4",
                 "5",
                 "6",
                 "7",
                 "8",
                 "9",
                 "10",
                 "11",
                 "12",
                 "13"
            ]
        };
        var currentPage = 1:
        var pageSize = 10;
        var count = result.data.length;
        var totalPage = Math.ceil(count / pageSize);
        pagination(result,currentPage,pageSize);
        function pagination(result,currentPage,pageSize){
            var initSerialNumber = new Array();
            for(var i = 0;i<result.data.length;i++){
                initSerialNumber[i] = i;
            }
            $("#current-page").text("当前第"+currentPage+"页");
            $("#total-page").text("共"+totalPage+"页");
            var us erNameContent = result.data.slice((currentPage-1)*pageSize,currentPage*pageSize);
            var serialNumberContent = initSerialNumber.slice((currentPage-1)*pageSize,currentPage*pageSize);
            var str = "";
            for(var i = 0;i < userNameContent.length;i++){
                 str +="<tr><td>"+(serialNumberContent[i]+1)+"</td><td>"+userNameContent[i]+"</td></tr>";
            $("#all-user").empty();
    
            $("#all-user").append(str);
            }
        $("#next-page").click(function(){
            if(currentPage!=totalPage){
                currentPage = currentPage+1;
                pagination(result,currentPage,pageSize);
            }
        });
        $("#previous-page").click(function{
            if(currentPage!=totalPage){
                currentPage = currentPage+1;
                pagination(result,currentPage,pageSize);
            }
        });
        $("#go").click(function(){
            var goPage = $("#go-page").val();
            if(goPage>=1 && goPage <= totalPage){
                currentPage = parseInt(goPage);
                pagination(result,currentPage,pageSize);
            }
        })
        }
    }    
  • 相关阅读:
    抽取一个简单的按钮方法
    一些iOS笔试题目
    使用第三方框架 Masonry 实现自动布局
    AutoLayout适配
    iOS面试小题集锦
    大牛们的技术博客
    5、过滤流
    3、过滤文件夹
    1、File类简介
    贪婪模式和非贪婪模式
  • 原文地址:https://www.cnblogs.com/zhanzhuang/p/10308629.html
Copyright © 2011-2022 走看看