对比分析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 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
详解Bootstrap按钮
Jan 04 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python中adb有什么功能
2020/06/07 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python可以用来做什么
2020/11/23 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
某公司.Net方向面试题
2014/04/24 面试题
《傅雷家书》教学反思
2014/04/20 职场文书
司机岗位职责说明书
2014/07/29 职场文书
党委班子对照检查材料
2014/08/19 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers