对比分析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 相关文章推荐
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
PHP7 windows支持
2021/03/09 PHP
Document 对象的常用方法
2009/07/31 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
基于openlayers实现角度测量功能
2020/09/28 Javascript
python批量爬取下载抖音视频
2019/06/17 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
行政主管职责范本
2014/03/07 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
联谊活动总结
2014/08/28 职场文书
党员剖析材料范文
2014/12/18 职场文书
信仰观后感
2015/06/03 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript