对比分析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判断单个复选框是否被选中的代码
Sep 03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
vue实现简单图片上传
2020/06/30 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python 如何实现遗传算法
2020/09/22 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
办理信用卡工作证明
2014/01/11 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
大班幼儿评语大全
2014/04/30 职场文书
党员干部一句话承诺
2014/05/30 职场文书
党员证明模板
2015/06/19 职场文书
保护地球的宣传语
2015/07/13 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python