Django Q查询与AngularJS Datatables分页插件实战解析
本文深入解析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的实际运行效果如图所示:


下面详细解析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分页插件的对比分析,希望能帮助读者。如有任何疑问欢迎留言,小编将及时回复。感谢对本站的支持!
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思?JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数:parseInt与Number的区别及用法
2026-11-03 17:26:54
