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);
    }

以上代碼是在項目中的實際代碼，或有累贅，只看對你有用的即可。