1 需求背景

在我們做管理系統，需要從後臺資料庫取出資料顯示到前臺時，可能我們的做法就是將資料全部取出然後利用jQuery動態新增到表格當中，但是當我們取出的量非常大時問題就出現了，我們會發現頁面載入的速度非常慢，這時我們就可利用分頁或者這種監聽滾動條來自動載入資料，這種技術也稱為“懶載入”

2 實現過程中遇到的問題總結

（1）首先就是在滾動條滾動到底部之後，監聽事件被多次觸發。這個問題的解決方式就是通過設定一個標誌，當滾動條滾動到底部並且標誌為真時，啟動載入資料事件，在進入動態載入資料時將標誌設定為假，載入資料成功後，在設定為真。
（2）其次，這裡ajax是非同步載入資料的，我們發現雖然給我們自動載入資料了但是他並不是按照我們請求的順序加載出來的，這是我們的解決方法就是將ajax改成同步，從而解決了這個問題。

3 部分程式碼實現

（1）前臺html

<div id="infolist" data-spy="scroll" class="articlefoot table-responsive">
    <table id="tabalelist" class="table text-nowrap">
        <caption>文章列表</caption>
        <thead>
            <tr>
                <th>編號</th>
                <th
 
>文章名稱</th>
                               <th>型別</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="menu1body">
        </tbody>
    </table>
</div>

（2）前臺js

// 顯示所有文章 先顯示20 條 其餘滑塊滾動到底部 自動載入
// 1 從後臺獲取文章資訊動態顯示
$.get('/showallinfo/', function(data){
    for(var i=0; i<data.length;
 
 i++){
        $('#menu1body').append('<tr id="articleinfo'+data[i]['id']+'"><td>'+data[i]['id']+'</td><td style="max-width: 600px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"><a href="/articleinfo/'+data[i]['id']+'/" target="_blank">'+data[i]['title']+'</a></td><td><select class="form-control"><option>'+data[i]['articleCategory']+'</option><option>NULL</option><option>數理科學</option><option>化學科學</option><option>生命科學</option><option>地球科學</option><option>工程與材料</option><option>資訊科學</option><option>管理科學</option><option>醫學科學</option><option>綜合</option></select></td><td><button class="btn btn-default" onclick="window.open(\'/reviseinfo/'+data[i]['id']+'\')" style="color: green;">修改</button>&nbsp;<button class="btn btn-default delart" style="color: red;">刪除</button>&nbsp;<button class="btn btn-default addkind" style="color: orange;">新增分類</button></td></tr>')
    }
})

// 滑塊滾動到底部 自動載入20 條記錄
var scrollnow = 2;//載入次數
var isbool=true;//標誌
$("#infolist").scroll(function() {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(this).height();
    var windowHeight = $(".table").height();

    if (scrollTop + scrollHeight >= windowHeight && isbool==true) {
    // 此處是滾動條到底部時候觸發的事件，在這裡寫要載入的資料，或者是拉動滾動條的操作
        $.post('/scrolladd/',{scrollnow : scrollnow},function (data) {
            scadd(data);
        })
        scrollnow++;
    }
});
// 設定ajax同步
$.ajaxSettings.async = false;
//動態新增資料
function scadd(data) {
    isbool=false;
    for(var i=0; i<data.length; i++){
        $('#menu1body').append('<tr id="articleinfo'+data[i]['id']+'"><td>'+data[i]['id']+'</td><td style="max-width: 600px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"><a href="/articleinfo/'+data[i]['id']+'/" target="_blank">'+data[i]['title']+'</a></tdsyt><td><select class="form-control"><option>'+data[i]['articleCategory']+'</option><option>NULL</option><option>數理科學</option><option>化學科學</option><option>生命科學</option><option>地球科學</option><option>工程與材料</option><option>資訊科學</option><option>管理科學</option><option>醫學科學</option><option>綜合</option></select></td><td><button class="btn btn-default" onclick="window.open(\'/reviseinfo/'+data[i]['id']+'\')" style="color: green;">修改</button>&nbsp;<button class="btn btn-default delart" style="color: red;">刪除</button>&nbsp;<button class="btn btn-default addkind" style="color: orange;">新增分類</button></td></tr>')
        isbool=true;
    }
}

（3）後臺django程式碼

# 顯示全部文章內容
def showallinfo(request):
    articles = Article.objects.all()[0:20]
    return HttpResponse(json.dumps(list(articles), default=lambda obj: obj.__dict__), content_type='application/json')

# 滑動到底部 自動載入20條
def scrolladd(request):
    scrollnow = request.POST.get('scrollnow')
    allnum = Article.objects.count()

    if allnum < 20 * (int(scrollnow)):
        artlist = Article.objects.all()[0 + 20 * (int(scrollnow) - 1):]
    else:
        artlist = Article.objects.all()[0 + 20 * (int(scrollnow) - 1):20 + 20 * (int(scrollnow) - 1)]

    return HttpResponse(json.dumps(list(artlist), default=lambda obj: obj.__dict__), content_type='application/json')