对比分析Django的Q查询及AngularJS的Datatables分页插件


Posted in Javascript onFebruary 07, 2017

使用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分页插件:

Datatables的主要功能是分页、即时搜索和排序,虽然django自带的模板引擎也有分页功能(Paginator),但无论从功能上还是美观上,Datatables都更好。

Datatables的效果如下图所示:

对比分析Django的Q查询及AngularJS的Datatables分页插件

对比分析Django的Q查询及AngularJS的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分页插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
js实现选项卡效果
Mar 07 Javascript
react中的DOM操作实现
Jun 30 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 #Javascript
深入理解JavaScript中的for循环
Feb 07 #Javascript
vue实现ToDoList简单实例
Feb 07 #Javascript
js Canvas绘制圆形时钟教程
Feb 06 #Javascript
JS中静态页面实现微信分享功能
Feb 06 #Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 #Javascript
Javascript之深入浅出prototype
Feb 06 #Javascript
You might like
PHPMailer安装方法及简单实例
2008/11/25 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Python简明入门教程
2015/08/04 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python scipy卷积运算的实现方法
2019/09/16 Python
django实现用户注册实例讲解
2019/10/30 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python中count函数简单的实例讲解
2020/02/06 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
python中@contextmanager实例用法
2021/02/07 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
.NET常见笔试题集
2012/12/01 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
2014年自我评价
2014/01/04 职场文书
大学秋游活动方案
2014/02/11 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2014年工程工作总结
2014/11/25 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle