django-ajax-utilities 1.2.9

1. 翻页

在settings.py中，添加此应用程序

> INSTALLED_APPS += (‘django_ajax’，)

默认样式仅渲染上一页和下一页按钮。如果想要渲染更多页面的链接，请添加此设置

> PAGINATION_STYLE = ‘verbose’

在views.py中

> from django_ajax.pagination import paginate > > # …读取对象（Query列表或其他可迭代对象） > objects = range(0, 100) > > # 分页 > paginated_objects = paginate(request, objects, 25, > query_string_parameters= {‘order_by’: order_by, ‘by’: by }, > use_get_parameters=False, > page_variable=’page1’) > > context = { ‘paginated_objects’: paginated_objects }

25告诉分页器每页显示不超过25个对象。use_get_parameters是可选的，当设置为True时，它将自动将当前查询字符串的所有参数（request.METAQUERY_STRING）添加到分页器链接中。query_string_parameters也是可选的，这是要添加到链接查询字符串中的其他参数。page_variable也是可选的。它仅当同一页上有多个分页器时才需要。变量应为每个分页器唯一。

在模板中

> {% load ajax_utilities %} > {% paginate paginated_objects %} > … > {% for object in paginated_objects.object_list %} > … > {% endfor %} > … > {% endpaginate %}

在基础模板中，添加此脚本

> <script type="text/javascript" src="{{ STATIC_URL }}js/ajax-utilities/pagination.js"></script>

这段JavaScript代码将寻找上一页和下一页的链接，并且会预加载这两页。当点击其中一个链接时，预加载页面的分页器主体内容将被放入当前可见页面的主体内容中。

如果你在分页器主体内部还有额外的导航链接，比如排序列标题。将这些链接放在一个容器中，类名为“pagination-helper”。这将使它们也使用AJAX。

> <div class="pagination-helper"> > <a href="{{ request.path }}?order_by_name">…</a> > </div>

GET表单的搜索结果可以通过AJAX获取，类似于加载其他任何页面。表单应该有action="?"和method="get"参数。当在此表单中按下Enter键时，只有分页器的主体将被重新加载，而网页的其他部分保持不变。

> <form method="get" action="?" class="pagination-form"> > <label><input type="text" name="q" value="{{ q }}" /></label> > </form>

在JavaScript中

如果你需要在分页器替换其主体时执行自定义JS代码，请使用以下JavaScript代码

> function handler(e, containers) > { > // 当分页器从页面切换时执行的代码… > // containers是一个元素数组（jQuery项目），其中内容可能已被更改。 > } > $(document).bind('paginatorPageReplaced', handler);

如果你想延迟分页器的渲染，因为它包含一些复杂的查询，可以将分页器嵌套在{% xhr %}模板标签中，如下所示：（目前还不支持反向嵌套，可能永远也不会支持。）

> {% load ajax_utilities %} > {% xhr %} > {% paginate paginator %} > … > {% endpaginate %} > {% endxhr %}

额外说明：为了允许保存页面，当前可见的页面将被附加到window.location.hash

1. 选项卡

在模板中

> {% load ajax_utilities %} > {% tabpage %} > {% tabs %} > <ul> > <li class="selected"><a href="…">…</a></li> > <li class=""><a href="…">…</a></li> > <li class=""><a href="…">…</a></li> > </ul> > {% endtabs %} > {% tabcontent %} > {% block tab_content %} > 继承此模板并创建一个名为‘tab_content’的块来填充选项卡内容。 > {% enblock %} > {% endtabcontent %} > {% endtabpage %} > > <script type="text/javascript" src="{{ STATIC_URL }}js/ajax-utilities/tabbing.js"></script>

这通常是基本模板。每个选项卡都匹配一个单独的视图，该视图渲染一个从基本模板派生出来的模板。它将填充tab_content块，并将选项卡标记为“选中”。

如果你想在选项卡页面内的链接在同一选项卡中打开，请使用tabbing-helper-class

> <a class="tabbing-helper" href="…"> (在同一个选项卡中打开的内容) </a>

在JavaScript中

> function handler(e, containers) > { > // 当分页器从页面切换时执行的代码… > // containers是一个元素数组（jQuery项目），其中内容可能已被更改。 > } > $(document).bind('tabLoaded', handler);

1. xhr

这是为大型网页进行的AJAX优化。{% xhr %}模板标签标记了一个在稍后的XML HTTP Request (AJAX)期间渲染的模板部分。

因此，实际上，包含{% xhr %}的每个视图都被渲染了两次。首先是不包含缓慢的、复杂的内容的视图，其中插入了一个占位符<div>，然后渲染一切。

将以下脚本插入到你的HTML中

> <script type="text/javascript" src="{{ STATIC_URL }}/js/ajax-utilities/xhr.js"></script>

用{% xhr %}标记缓慢的部分

> {% load xhr %} > … 一些内容 … > > {% xhr %} > 非常慢的内容 > {% else %} > 加载中，…（在此处插入加载消息或图片，…） > {% endxhr %} > > … 一些内容 …

{% else %}部分可以省略，或者它可以包含一个加载消息。

如果慢速内容依赖于视图中不必要的计算，而其他内容不需要这些计算。确保在视图中首次运行时不执行这些计算。

> def view(request): > if ‘xhr’ in request.REQUEST: > do_slow_calculations() > > return …

在JavaScript中

> function handler() > { > … (当xhr内容加载时要执行的代码) … > $(‘.xhr_container’).each(function () { … } ); > } > $(document).bind(‘xhrLoaded’, handler);