对比分析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 相关文章推荐
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
js中switch case循环实例代码
Dec 30 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
webpack4的迁移的使用方法
May 25 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js实现微信聊天效果
Aug 09 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
1.PHP简介
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
项目实践之javascript技巧
2007/12/06 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python实现人机猜拳小游戏
2020/02/03 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
行政管理专业推荐信
2013/11/02 职场文书
委托书的格式
2014/08/01 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js