Java json数组对象获取到前端的值使用js分页

Java json数组对象获取到前端的值使用js分页

使用ajax时，得到的返回值是一个json数组对象，现在需要对其进行分页显示，下面有两个js方法，一个是使用ajax，另一个就是分类。

在写这一块代码的时候的时候，有一个意外的小发现，

$(inputTest).val()

这样也能获取<input type = "test" id = "inputTst" />
这个也能获取该input的value值。

通过单击事件，使用ajax进行交互—–

$("#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分页函数—-

/*分页  计算*/
    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);
    }

以上代码是在项目中的实际代码，或有累赘，只看对你有用的即可。