对比分析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控制frame的隐藏或显示的解决办法
Mar 20 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
layui实现数据分页功能
Jul 27 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python实现划词翻译
2020/04/23 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
浅析python的Lambda表达式
2019/02/27 Python
python dlib人脸识别代码实例
2019/04/04 Python
Django配置文件代码说明
2019/12/04 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python