对比分析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 for循环设法提高性能
Feb 24 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 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设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP中“=>
2019/03/01 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python之时间和日期使用小结
2019/02/14 Python
django如何实现视图重定向
2019/07/24 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
先进单位申报材料
2014/12/25 职场文书
股份转让协议书范本
2015/01/27 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
《所见》教学反思
2016/02/23 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书