django jquery 分页 bootstrap
项目中需要实现数据查询，基于django的admin架构必然会很容易实现。不过在用户体验方面就会比较low了，因此需要自己实现类adminsite的效果。而且项目需要实现响应式所以bootstrap就成了首选。研究了一下午，基本上做好了技术准备。
1、资源
django-endless-pagination
https://github.com/frankban/django-endless-pagination
（1）优点
支持类twitter 和 digg的效果
代码基本可读
有demo
支持lazy，性能上有保障
（2）缺点
两年前多项目了，不知道会不会有bug或者是不兼容的问题
2、快速使用
2.1 setting.py配置
from django.conf.global_settings import TEMPLATE_CONTEXT_PROCESSORS
TEMPLATE_CONTEXT_PROCESSORS += (
'django.core.context_processors.request',
)
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'endless_pagination',
'demoendless',
)
2.2 创建自己的app，或者修改已有app。
（1）先创建了测试models
# encoding: utf-8 from django.db import models from django.utils.encoding import python_2_unicode_compatible from django.utils.translation import ugettext_lazy as _ # Create your models here. class Person(models.Model): name=models.CharField(_(u'用户名'),max_length=30)
（2）修改一下urls.py
urlpatterns = patterns('',
url(r'^index/','demoendless.views.index'),
url(r'^digg/$','demoendless.views.entry_index'),
)
备注：其实这个写法还没有发挥django 强大威力，请赏鉴django-endless-pagination中的urls 写法
url(r'^digg/$',
page_template('digg/page.html')(generic),
{'template': 'digg/index.html'},
name='digg'),
（3）修改views.py
from __future__ import unicode_literals
from django.shortcuts import render_to_response, get_object_or_404, render
from django.http import HttpResponseRedirect, HttpResponse
from django.template import RequestContext
from .models import Person
# Create your views here.
def index(request):
return HttpResponse('data')
def entry_index(
request,
template='digg/index.html',
page_template='digg/page.html'):
context = {
'entries': Person.objects.all(),
'page_template': page_template,
}
if request.is_ajax():
template = page_template
return render_to_response(template, context, context_instance=RequestContext(request))
备注：其中if request.is_ajax(): template = page_template 使用的非常巧妙，第一次请求肯定是get，后台就全部渲染。在查询中点击页码时，这个app肯定采用的是jquery的ajax，不过在页面的源码中没有看到。以后有时间好好研究一下
（4）templats模版
base.html模版
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<title>{% block title %}Testing project{% endblock %} - Django Endless Pagination</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}pagination.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
{% block content %}{% endblock %}
</div>
</div>
{% block js %}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}endless_pagination/js/endless-pagination.js"></script>
{% endblock %}
</body>
</html>
index.html
{% extends "base.html" %}
{% block content %}
<div class="endless_page_template span12">
{% include page_template %}
</div>
{% endblock %}
{% block js %}
{{ block.super }}
<script>
$.endlessPaginate();
</script>
{% endblock %}
page.html
{% load endless %}
{% paginate 5 entries %}
{% for object in entries %}
<div class="well object">
<h4>{{ object.id }}</h4>
{{ object.name }}
</div>
{% endfor %}
<div class="pagination pagination-centered">
<div>{% show_pages %}</div>
</div>
