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},         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},         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%}

巴特西

Django - Ajax分页

最新文章

热门文章