AJax技术

Django - Ajax分页

字号+ 作者:H5之家 来源:H5之家 2017-10-15 17:02 我要评论( )

Django - Ajax分页,目前总结了2种方法:1. Ajax 分页尼玛各种google,stackoverflow,搞了好久才总结出这个,之前使用Pagination tag loading的方式不好用,并且不

目前总结了2种方法:

1. Ajax 分页

尼玛各种google,stackoverflow,搞了好久才总结出这个,之前使用Pagination tag loading的方式不好用,并且不能进行ajax提交请求的页面无刷新的方式去分页

1.view.py

1 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 2 from django.shortcuts import render 3 def xxx(request): 4 rows = cursor.fetchall() 5 paginator = Paginator(rows, 15) //how many items per page ) 7 try: 8 rows = paginator.page(page) 9 except PageNotAnInteger: rows = paginator.page(1) 12 except EmptyPage: rows = paginator.page(paginator.num_pages) , {: rows})

2. ajax_page.html

{% if rows.has_previous %} previous {% endif %} Page {{ rows.number }} of {{ rows.paginator.num_pages }}. {% if rows.has_next %} next {% endif %}

3. JS -Ajax 部分

1 {%block js%} 2 <script type="text/javascript"> 3 $('.step-links #next').click(function(){ 4 {% if rows.has_next %} 5 page={{ rows.next_page_number }}; 6 {% endif %} 7 $.ajax({type:"POST",url:"/submitjobs/",data:{"page":page},10 success:function(data){ 11 $("#jobs_table").html(data); 12 } }); 16 $('.step-links #pre').click(function(){ 17 {% if rows.has_previous %} 18 page={{ rows.previous_page_number }}; 19       {% endif %} 20 $.ajax({type:"POST",url:"/submitjobs/",data:{page":page},23 success:function(data){ 24 $("#jobs_table").html(data); 25 } 26 }) 27 }); 28 </script> 29 {%endblock%}

2. Datatable - plugin for Jquery ()

这种方法quick and dirty 唯一缺点就是不适用海量数据一般几百来页也是可以的,只需在js中调用dataTable方法就好。

数据填充已经在方法1中使用render.request将数据载入table.

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Django( Ajax )

    Django( Ajax )

    2017-10-11 15:06

  • 我看了好几个关于 ajax 的教程,可能是教程讲的不够深,我想问问 p

    我看了好几个关于 ajax 的教程,可能是教程讲的不够深,我想问问 p

    2017-10-08 09:03

  • 使用ajax后,lazyload.js失效,怎么解决

    使用ajax后,lazyload.js失效,怎么解决

    2017-08-31 08:00

  • 详解GoogLeNet的Keras实现

    详解GoogLeNet的Keras实现

    2017-08-23 14:01

网友点评
b