Django - Ajax分页

目前总结了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
 6             page = request.POST.get(‘page‘)
 7             try:
 8                 rows = paginator.page(page)
 9             except PageNotAnInteger:
10                 # If page is not an integer, deliver first page.
11                 rows = paginator.page(1)
12             except EmptyPage:
13                 # If page is out of range (e.g. 9999), deliver last page of results.
14                 rows = paginator.page(paginator.num_pages)
15     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 部分

 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                     }
13             })
15      });
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 (http://datatables.net/)

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

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

{%block js%}
<script type="text/javascript">
$(‘#job_table‘).dataTable();
</script>
{%endblock%}
时间: 2025-01-18 13:17:00

Django - Ajax分页的相关文章

Django+ajax实现页面底部加载

Django+ajax实现页面底部加载 需求:展示图片,当滚动条拖到页面底部时加载一部分图画. 问题:photo的展示使用的是django的QuerySet,对于ajax如何加载非常头痛,还专门补了一下js. 解决思路:用的取巧的办法,把photo先分页,然后ajax的load方法加载下一个页面的photo部分到当前页面来. 分页 第一步是把photo的QuerySet分页展示,我这里直接用127.0.0.1:8000/x/的url,所以在urls.py里这样写 url(r'^(?P<page>

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

Django &amp; Ajax Part01

背景需求分析 使用Django+Ajax的背景情景,当用户填写一个非常详细的注册申请表的时候!用户最担心的事情应该是填表期间被人打扰,其次是希望填完表提交以后千万别出现什么差错,否则又得从新来过!因此,我们首先想到的可能会是使用Ajax来处理.Ajax的介绍通常都是基于PHP后台的编写模式,我自己从没用过PHP写过服务器,所以找工作对我来说都是一场噩梦啊! 开发环境准备 这里我将会完整的演示如何建立以及配置我们的django环境,以后我们写的各种代码如果不特别说明都是基于这个项目环境上完成的!

django 自定义分页模块

django 自定义分页模块 from django.shortcuts import render, HttpResponse, redirect from django.utils.safestring import mark_safe class Page(object): def __init__(self, current_page): self.current_page = int(current_page) @property def start(self): return (se

Django ajax Post

在web项目中,ajax运用非常频繁,今天就给大家展示下Django ajax Post的使用方法 templates 模板--------------------- index.html <html> <header></header> <body> <p>name: <input type="text" name="nickname" /></p> <input class

瀑布流ajax分页

index.jsp 1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 6 <title>图片&

ajax 分页完全代码整理

/* ajax分页 */var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//总记录数,每页条数,总页数function getData(page) { //获取当前页数据     $.ajax({          type: 'GET',          url: 处理数据地址,          data: {              'page': page,              'catid': 

jQuery、Ajax分页

1.效果图预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable"> <

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.