对比分析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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
js实现下拉菜单效果
Mar 01 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
vue 实现的树形菜的实例代码
Mar 19 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
JavaScript中的this妙用实例分析
May 09 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连接mysql数据库代码
2009/03/10 PHP
php判断变量类型常用方法
2012/04/24 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Python中删除文件的程序代码
2011/03/13 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Django和Flask框架优缺点对比
2019/10/24 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
大学毕业自我评价
2014/02/02 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014年德育工作总结
2014/11/20 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python