对比分析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 相关文章推荐
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 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
基于PHP异步执行的常用方式详解
2013/06/03 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python中的推导式使用详解
2015/06/03 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
项目计划书范文
2014/01/09 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
求职信怎么写
2014/05/23 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
接待员岗位职责范本
2015/04/15 职场文书
刑事法律意见书
2015/06/04 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
世界十大狙击步枪排行榜
2022/03/20 杂记
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis