Django - Ajax分頁

目前總結了2種方法：

1. Ajax 分頁

尼瑪各種google,stackoverflow,搞了好久才總結出這個，之前使用Pagination tag loading的方式不好用，並且不能進行ajax提交請求的頁面無刷新的方式去分頁

1.view.py

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.shortcuts import render
def xxx(request):
            rows = cursor.fetchall()
            paginator = Paginator(rows, 15) //how many items per page
            page = request.POST.get('page')
            try:
                rows = paginator.page(page)
            except PageNotAnInteger:
                # If page is not an integer, deliver first page.
                rows = paginator.page(1)
            except EmptyPage:
                # If page is out of range (e.g. 9999), deliver last page of results.
                rows = paginator.page(paginator.num_pages)
    return render(request,'ajax_page.html', {'rows': rows})

2. ajax_page.html

<div class="pagination">
    <span class="step-links">
        {% if rows.has_previous %}
            <a id='pre' href="#">previous</a>
        {% endif %}
        <span class="current">
            Page {{ rows.number }} of {{ rows.paginator.num_pages }}.
        </span>
        {% if rows.has_next %}
            <a id="next" href="#" >next</a>
        {% endif %}
    </span>
</div>

3. JS -Ajax 部分

{%block js%}
  <script type="text/javascript">
     $('.step-links #next').click(function(){
        {% if rows.has_next %}
        page={{ rows.next_page_number }};
             {% endif %}
        $.ajax({type:"POST",url:"/submitjobs/",data:{"page":page},10         success:function(data){
            $("#jobs_table").html(data);    
                    }
            })
     });    
     $('.step-links #pre').click(function(){
         {% if rows.has_previous %}
        page={{ rows.previous_page_number }};
　　　　　　{% endif %}
        $.ajax({type:"POST",url:"/submitjobs/",data:{page":page},23         success:function(data){
            $("#jobs_table").html(data);    
                    }
            })
     });
 </script>
  {%endblock%}

 

2. Datatable - plugin for Jquery (http://datatables.net/)

這種方法quick and dirty 唯一缺點就是不適用海量數據一般幾百來頁也是可以的，只需在js中調用dataTable方法就好。

數據填充已經在方法1中使用render.request將數據載入table.

{%block js%}
<script type="text/javascript">
$('#job_table').dataTable();
</script>
{%endblock%}