在前端写分页

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

首先，若是第一次点击回测报告按钮则像后台发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');
        }
        
    }
}

页面效果如下：