对比分析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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP 文件上传限制问题
2019/09/01 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javascript知识点收藏
2007/02/22 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python实现数据分析与建模
2019/07/11 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python tkinter实现连连看游戏
2020/11/16 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
总经理助理的八要求
2013/11/12 职场文书
护理工作感言
2014/01/16 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL