Django Q查询与AngularJS Datatables分页插件实战解析

作者:橙子时间:2026-10-21 21:31:26浏览:638

本文深入解析Django中Q对象的组合查询与模糊匹配用法,并结合AngularJS的Datatables插件展示如何实现高效的前后端分离分页。通过DTOptionsBuilder配置服务器模式与Ajax数据源,以及DTColumnBuilder定义列渲染,完整演示了从数据库查询到前端表格展示的集成方案。

Django Q查询基础与组合用法

在使用Q查询功能前,需先导入对应的Q模块:


from django.db.models import Q

多个Q对象可以通过&,|操作符进行组合,生成新的Q对象。此外,Q对象前可添加~操作符表示逻辑非,具体示例如下:


if search:
   keywords_list = search.split(' ')
   query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_status(keyword) else
       Q(username__icontains=keyword) |
       Q(groupid__icontains=keyword) |
       Q(status_active_vs__icontains=keyword) |
       Q(orders_created_time__icontains=keyword) |
       Q(status_bind__icontains=keyword) |
       Q(status_active_Bind__icontains=keyword) |
       Q(env__icontains=keyword) for keyword in keywords_list]
   q = Q()
   for query in query_list:
    q.add(query, Q.AND) #把query添加到之前定义的最外层的Q对象中,查询条件是 '和'

Q查询中使用的__icontains字段表示包含关系,适用于模糊查询场景,例如:


Q(username__icontains=keyword) | Q(groupid__icontains=keyword) 表示查询 username或者 groupid

AngularJS Datatables配置与前后端分页

接下来介绍AngularJS环境下的Datatables分页插件。

Datatables核心功能涵盖分页、即时搜索及排序。尽管Django内置的Paginator模板引擎也具备分页能力,但在功能丰富度与界面美观性方面,Datatables表现更优。

Datatables的实际运行效果如图所示:

Django Q查询基础与组合用法

Django Q查询基础与组合用法

下面详细解析Datatables中DTOptionsBuilder方法的具体用法。

DTOptionsBuilder.newOptions是AngularJS datatables库的关键方法,.newOptions主要用于实现前后端协同的分页逻辑。


DTOptionsBuilder.newOptions()
 .withOption('ajax', {
  url: "/api/other/get_http_https_apply/",
  type: 'GET'
 })
 .withDataProp('data')
 .withOption('serverSide', true)
 .withPaginationType('full_numbers')
 .withOption('createdRow', createdRow)
 .withOption('order', [
  [0, 'desc']
 ]);

配置'serverSide'为true表示启用服务器端处理模式。

ajax参数用于指定数据来源,同时负责处理分页、排序及过滤逻辑。

设置'full_numbers'表示显示所有页码数字。


http_https.dtColumns = [
  DTColumnBuilder.newColumn('id').withTitle('ID'),
  DTColumnBuilder.newColumn('username').withTitle('申请人'),
  DTColumnBuilder.newColumn('env').withTitle('环境'),
  DTColumnBuilder.newColumn('groupid').withTitle('group_id'),
  DTColumnBuilder.newColumn('status_active_vs').withTitle('激活vs').renderWith(apply_status),
  DTColumnBuilder.newColumn('status_bind').withTitle('绑定').renderWith(apply_status),
  DTColumnBuilder.newColumn('status_active_Bind').withTitle('激活绑定').renderWith(apply_status),
  DTColumnBuilder.newColumn('status').withTitle('最终结果').renderWith(apply_status),
  DTColumnBuilder.newColumn('orders_created_time').withTitle('时间')
 ];
 //判断是否是admin用户,如果是admin,则在http_https.dtColumns这个数组中增加(push)一个元素
 if (http_https.js_admin) {
  http_https.dtColumns.push(DTColumnBuilder.newColumn(null).renderWith(actionsHtml).withTitle('Actions'))
 }

DTColumnBuilder.newColumn用于定义表格的新增列。

.renderWith方法用于数据渲染,此处apply_status为自定义函数,旨在将JSON中的True和False转换为HTML中的“成功”或“失败”文本。

部分详细代码已托管至GitHub:https://github.com/a342058040/Django_AngularJS_Datatables.git

以上是对Django Q查询与AngularJS Datatables分页插件的对比分析,希望能帮助读者。如有任何疑问欢迎留言,小编将及时回复。感谢对本站的支持!

作者最新文章