对比分析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 操作符整理[推荐收藏]
Nov 15 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
JavaScript 截取字符串代码实例
Sep 05 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
javascript中对对层的控制
2006/12/29 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python中doctest库实例用法
2020/12/31 Python
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
车间安全生产标语
2014/06/06 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS