对比分析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计算页面执行时间的函数
Dec 07 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
ztree实现权限横向显示功能
May 20 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
教你用Python写安卓游戏外挂
2018/01/11 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python实现猜数字小游戏
2020/03/24 Python
Django添加feeds功能的示例
2018/08/07 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python 解决函数返回return的问题
2020/12/05 Python
python实现学生信息管理系统源码
2021/02/22 Python
婚假请假条怎么写
2014/04/10 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python