Java json array object gets the value of the front end using js paging

Java json array object gets the value of the front end using js paging

When using ajax, the returned value is a json array object, and now it needs to be displayed in pagination. There are two js methods below, one is to use ajax, and the other is to classify.

When writing this piece of code, I made an unexpected discovery,

$(inputTest).val()

This can <input type = "test" id = "inputTst" />
also get the value of the input.

Use ajax to interact with click events ---

$("#btnIndex").click(function() {

    var url = "/PublicServicePlatform/AnnualSelectServlet?time=" + new Date().getTime();
    var btnIndex = $("#txtIndex").val();
    /*指标值*/
    var selectTarget = $("#selectTarget").val();
    /*年鉴名*/
    var selectYears = $("#selectYears").val();
    /*年份*/

    if (selectTarget == "- -请选择年鉴- -") {
        selectTarget = "";
    }
    if (selectYears == "- -请选择年鉴时间- -") {
        selectYears = "";
        var judgeMark = confirm('您没有选择具体时间，确定要继续吗？');
        if (!judgeMark) {
            return;
        }
    }
    var sendData = {
        flag: "btnIndex",
        btnIndex: btnIndex,
        selectTarget: selectTarget,
        selectYears: selectYears
    };

    var xhr = $.post(url, sendData,
    function() {
        var jsonString = xhr.responseText;
        var jsonObj = JSON.parse(jsonString);

        var table_tr_num = jsonObj.length;
        /******分页使用代码块*******/
        var totalPage = 0; //总页数
        var length = 5; //每页显示行数
        //总共分几页
        if (table_tr_num / length > parseInt(table_tr_num / length)) {
            totalPage = parseInt(table_tr_num / length) + 1;
        } else {
            totalPage = parseInt(table_tr_num / length);
        }
        /******分页使用代码块*******/
        console.log('共分了' + totalPage + '页');

        getPage(jsonObj, table_tr_num, totalPage, 1, 5); //参数解释--  返回的josn对象 、总的对象条数   、  总的页数 、当前页 、当前页开始的条数、 每页显示的条数
    });
});

js paging function---

/*分页  计算*/
    function getPage(jsonObj, table_tr_num, totalPage, current_count, count_length) {//参数解释--  返回的josn对象、总的数据条数  、  总的页数 、当前页 、 每页显示的条数
        console.log('totalPage = '+totalPage+'; current = '+count_length+'; count_length = '+count_length);

        if(current_count <= 1){
             i = 0;
             length = (count_length > table_tr_num)? table_tr_num : count_length; 
             current = 1;
        } else if(current_count <= totalPage) {
             i = (current_count - 1) * count_length;
             tem = current_count * count_length;
             length = (tem > table_tr_num)? table_tr_num : tem; 
             current = current_count;
        } else if(current_count > totalPage){
             i = (totalPage - 1) * count_length;
             length = table_tr_num;
             current = totalPage;
        } 
        $jsonObj = jsonObj;
        $table_tr_num = table_tr_num;
        $totalPage = totalPage;
        $current = current;
        var $info = '<tr><td><b>指标名</b></td><td>指标父类</td><td>指标所在表</td><td>指标所在年鉴</td><td>操作</td></tr>';
        for ( ; i < length ; i++) {
            var otherDims = jsonObj[i].otherDims;/*另一维中文名*/
            var otherDims_id = jsonObj[i].otherDims_title_id;/*另一维id*/
            var indexName = jsonObj[i].indexName;/*指标中文名*/
            var annual_title_id = jsonObj[i].annual_title_id;/*指标id*/
            var annual_title_region = jsonObj[i].annual_title_region;/*指标id*/
            var parentNames = jsonObj[i].parentNames;/*父节点*/
            var tableName = jsonObj[i].tableName;/*表名*/
            var annualName = jsonObj[i].annualName;/*年鉴名*/
            var annualYear = jsonObj[i].annualYear;/*年鉴时间*/
            var annualRegion = jsonObj[i].annualRegion;/*年鉴地域*/
            $info += '<tr><td>'+indexName+'</td><td>'
                    + parentNames + '</td><td>' + tableName + '</td><td>' + annualName
                    + '</td><td><input type="checkbox" name="titleInfo" onclick="addIndex(this)" value="'
                    +indexName+'***'+annual_title_id+'***'
                    +otherDims+'***'+otherDims_id+'***'+annualYear+'***'
                    +annualRegion+'***'+annual_title_region+'" /></td></tr>';

        }
        $("#titleInfo").html($info);

        $indexInfo = '<input type="button" onclick="creatTables()" value="新建表">'
        +'<input type="button" onclick="addPreTab()" value="添加到上一个表">'
        +'<input type="button" onclick="gettable()" value="查看建表详情">'
        +'<div id="barcon" name="barcon"></div>';

        $('#indexButton').css('display','block');
        $('#indexButton').html($indexInfo);


        $page = '<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,1,5);">首页</a></li>'
        +'<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$current-1,5);">上一页</a></li>'
        +'<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$current+1,5);">下一页</a></li>'
        +'<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$totalPage,5);">尾页</a></li>'
        +'<li class="total">共 '+table_tr_num+'条    '+ totalPage+ '页   第  <font size="3" color="red">'+ current +'</font>'
        +' 页   跳转到第<input type="text" id="JumpPar"/>页 </i><input value="确定" type="button" onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$(JumpPar).val(),5);" /></li>';

        $('#page').html($page);
    }

The above code is the actual code in the project, or it may be cumbersome, just look at what is useful to you.