zoukankan      html  css  js  c++  java
  • 在前端写分页

    我的需求是在页面上点击回测报告的按钮,可以在该页面中插入一个表格,但是数据很多,需要做一个分页。

    首先,若是第一次点击回测报告按钮则像后台发ajax请求数据,若不是第一次点击则判断表格部分的div是否是隐藏的,若隐藏则让它显示,若显示的则让它隐藏。

    html的代码如下:

    ----------------------这是另一块内容----------------------------

    <button class="btn btn-warning waves-effect waves-light" onclick="backTestReport()">回测报告</button>

    ----------------------end-------------------------------------------

    <div id="report" class="row">
                        <div class="col-sm-12">
                            <div class="card-box">
                                <table class="table table table-hover m-0">
                                    <thead>
                                        <tr>
                                            <th class="col-sm-4" data-field="id" data-switchable="false">时间</th>
                                            <th class="col-sm-2" data-field="name">标的</th>
                                            <th class="col-sm-2" data-field="backtesting">买卖</th>
                                            <th class="col-sm-2" data-field="date">价格</th>
                                            <th class="col-sm-2" data-field="user-status">数量</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                <div class="text-right" id="page">
                                    <ul class="pagination pagination-split m-t-30 m-b-0">
                                        <li class="footable-page">
                                            <a class="btn btn-warning"><span id="currentPage">1</span></a>
                                        </li>
                                        <li class="footable-page">
                                            <a><span id="totalPage">1</span></a>
                                        </li>
                                        <li class="footable-page active" id="fast">
                                            <a onclick="paging('fast')">首页</a>
                                        </li>
                                        <li class="footable-page" id="prev">
                                            <a onclick="paging('prev')">上一页</a>
                                        </li>
                                        <li class="footable-page" id="next">
                                            <a onclick="paging('next')">下一页</a>
                                        </li>
                                        <li class="footable-page" id="last">
                                            <a onclick="paging('last')">尾页</a>
                                        </li>
                                        <li class="footable-page">
                                            <b style="float: left;">跳转到<input type="text" id="jumpage"></b>
                                            <a class="btn btn-primary waves-effect waves-light" onclick="paging('jump');">确定</a>
                                        </li>
                                    </ul>
                                </div> 
                            </div>
                            
                        </div>

    css代码:

        <style type="text/css">
            #report{
                display: none;
            }
            #page ul li a:hover{
                cursor: pointer;
            }
            #page ul li b{
                margin: 3px 3px;
            }
            #jumpage{
                margin: 0 5px;
                width: 30px;
            }
        </style>

    js代码如下:

    var isClick = false;//用来判断按钮是否是第一次点击,默认为false是第一次点击
    var trades;//用来保存data的json
    var num = 5;//每页显示的条数
    var totalPage;//总页数
    function tbodyCon(i){//从json中取出数据插入到表格中
        item = "<tr><td>"+trades[i].time+"</td><td>"+trades[i].symbol+"</td><td>"+trades[i].sellbuy+"</td><td>"+trades[i].price+"</td><td>"+trades[i].volume+"</td></tr>";
        $("#report tbody").append(item);
    }
    function backTestReport(){
        var strategyname = $("ol").children().last().text().trim();
        if(isClick==false){//若是第一次点击按钮
            $.ajax({
                async:true,
                type:'POST',
                data:{"strategyname":strategyname},
                dataType:'json',
                url:'/trades/',
                success:function(data){
                    if(data.length>0){//判断json文件中是否有数据
                        trades = data;
                        var item;
                        console.log(data);
                        if(data.length<num){//若json中的数据条数小于每页显示的条数,则让每页显示的条数等于总条数
                            num = data.length;
                        }
                        totalPage = Math.ceil(data.length/num);
                        $("#report").css("display","block");
                        $("#totalPage").text(totalPage);
                        for(var i=0;i<num;i++){
                            tbodyCon(i);
                        }
                        isClick = true;
                    }
                }
            });
        }else{
            var state = $("#report").css("display");
            if(state=='none'){
                $("#report").css("display","block");
            }else{
                $("#report").css("display","none");
            }
        }
    }
    function paging(obj){
        var currentPage = parseInt($("#currentPage").text());
        // console.log(currentPage,totalPage,obj);
        $("#page ul li").removeClass("active");
        $("#report tbody").children('tr').remove();
        if(obj=="fast"){//首页
            for(var i=0;i<num;i++){
                tbodyCon(i);
            }
            $("#fast").addClass("active");
            $("#currentPage").text('1');
        }else if(obj=="prev"){//上一页
            if(currentPage != 1){
                for(var i=num*(currentPage-2);i<num*(currentPage-1);i++){
                    tbodyCon(i);
                }
                $("#prev").addClass("active");
                $("#currentPage").text(currentPage-1);
            }else{
                for(var i=0;i<num;i++){
                    tbodyCon(i);
                }
                $("#fast").addClass("active");
                $("#currentPage").text('1');
            }
        }else if(obj=="next"){//下一页
            if(currentPage != totalPage){
                for(var i=num*currentPage;i<num*(currentPage+1);i++){
                    tbodyCon(i);
                }
                $("#next").addClass("active");
                $("#currentPage").text(currentPage+1);
            }else{
                for(var i=num*(totalPage-1);i<trades.length;i++){
                    tbodyCon(i);
                }
                $("#last").addClass("active");
                $("#currentPage").text(totalPage);
            }
        }else if(obj=="last"){//尾页
            for(var i=num*(totalPage-1);i<trades.length;i++){
                tbodyCon(i);
            }
            $("#last").addClass("active");
            $("#currentPage").text(totalPage);
        }else if(obj=="jump"){//尾页
            var jumpage = parseInt($("#jumpage").val());
            if(jumpage!=""&&jumpage!=null&&!(isNaN(jumpage))&&0<jumpage<=totalPage){//jumpage必须是非空格,非null,!isNaNaN是一个数字,并且范围在0到总页数之间
                for(var i=num*(jumpage-1);i<num*jumpage;i++){
                    tbodyCon(i);
                }
                $("#currentPage").text(jumpage);
            }else{//若不满足条件则按首页处理
                for(var i=0;i<num;i++){
                    tbodyCon(i);
                }
                $("#fast").addClass("active");
                $("#currentPage").text('1');
            }
            
        }
    }

    页面效果如下:

  • 相关阅读:
    C++编程之约定俗成的习惯(1)
    “亚信科技杯”南邮第七届大学生程序设计竞赛之网络预赛 (K L题解) CSS出题
    “亚信科技杯”南邮第七届大学生程序设计竞赛之网络预赛 (K L题解) CSS出题
    “亚信科技杯”南邮第七届大学生程序设计竞赛之网络预赛 (K L题解) CSS出题
    “亚信科技杯”南邮第七届大学生程序设计竞赛之网络预赛 (K L题解) CSS出题
    万万没想到(2) 南邮NOJ2058
    万万没想到(2) 南邮NOJ2058
    万万没想到(2) 南邮NOJ2058
    万万没想到(2) 南邮NOJ2058
    万万没想到(1) 南邮NOJ
  • 原文地址:https://www.cnblogs.com/qjykn/p/9239842.html
Copyright © 2011-2022 走看看