ajax從后臺獲取全部的數(shù)據(jù)之后，現(xiàn)在分次顯示在頁面上。

使用ajax從后臺獲取到全部數(shù)據(jù)，要在頁面分次顯示，之前是不斷的調(diào)用ajax來分次顯示，現(xiàn)在是在頁面上做分次顯示。

                  $.ajax({
                    type: "POST",
                    url: "./ajaxAutoComplete.do",
                    dataType:"json",
                    data: "method=getCityList&countryCode="+countryCode+"&offset="+offsetDate+"&isPage=false",
                    success: function(g_cityList){
                        var sCityTable = [];
                        var cityCodeArr = cityCodes.split(",");
                            $("#cityBtn").select({
                                dataType    : "cityName",
                                dataArray   : g_cityList,
                                dataCode    : cityCodeArr,
                                checkboxText:$("#cityCode"),
                            });
                        
                    }
                });

success返回的是一個g_cityList數(shù)組，這個數(shù)據(jù)有幾千條，怎么每次顯示，比如一次顯示1000條
這個數(shù)據(jù)生成的頁面是用js寫的，后臺返回的數(shù)據(jù)直接導(dǎo)入到j(luò)s中生成頁面。
后端分頁我已經(jīng)完成，但是上司要求在前端分別。。

回答

編輯回答

裸橙

為什么不做成分頁的形式？一次性獲取全部的數(shù)據(jù)，然后前端在進(jìn)行數(shù)據(jù)類似分頁的處理，這種做法其實(shí)是比較不好的。

2018年8月21日 23:50

編輯回答

尐懶貓

之前做過前臺分頁，效果不是很好，數(shù)據(jù)大的話很卡。
我的方法是根據(jù)分頁數(shù)創(chuàng)建相應(yīng)多個div，class做相應(yīng)的命名，例如第一個div定位page_1，第二個page_2...
然后需要寫個方法創(chuàng)建下面的分頁條，根據(jù)傳遞的當(dāng)前頁，每次創(chuàng)建一次分頁條，或者全部創(chuàng)建出來，顯示隱藏。

然后就說點(diǎn)擊分頁條，獲取數(shù)值，讓上面的div做相應(yīng)的顯示隱藏。。。

2017年3月26日 09:12

編輯回答

焚音

分情況考慮：
1、修改后端（需要改動的東西不多），畢竟一次性異步請求這么多數(shù)據(jù)，用戶體驗(yàn)不是非常的好。如果是這樣的話，只要雙方定義好接口就好，你只需要用（template）展示數(shù)據(jù)即可。
2、老板堅持自己的想法，只能修改前端的話，做成tab欄形式的！根據(jù)你分頁的效果，去規(guī)定自己如何去分配所有數(shù)據(jù)！

盡量說服你的老板，別讓自己太辛苦了！加油！

（如果有不對的地方，感謝糾正?。?/p>

2018年4月9日 05:44

編輯回答

不將就

建議后端數(shù)據(jù)分組，前端請求時帶上一個page，成功后page+1；
前端做的話：

 var aaa = [1,2,3,4,5,6,7];


    function paging(arr,num){
        var len = arr.length;
        var page =  Math.ceil(arr.length/num);
        var myarr = [];
        for(var i=0;i<len;i=i+page){
            myarr.push(arr.slice(i,i+page));
        }  
        return myarr;
    } 
    console.log(paging(aaa,3));

2018年6月17日 21:34

編輯回答

怣人

這就是前端分頁的問題，獲取到數(shù)據(jù)后，然后渲染數(shù)據(jù)與頁碼

第1頁展示： 0-999的數(shù)據(jù)
第2頁展示： 1000-1999的數(shù)據(jù)
第3頁展示： 2000-2999的數(shù)據(jù)
...

就是說第page頁，展示data中的數(shù)據(jù)開始位置start是 (page-1)*1000, limit是1000 ，用戶點(diǎn)擊某個頁碼按鈕時，則直接從data獲取數(shù)據(jù)并渲染。

function render(page){
    let limit=1000,
        start=(page-1)*limit,
        html='';
        
    for(let i=start, i<start+limit; i++){
        html += datap[i];
    }
    $('.tt').html(html);
}

2017年2月8日 20:44