对比分析Django的Q查询及AngularJS的Datatables分页插件

 更新时间:2017年02月07日 09:02:18   作者:飞哥ABC  
通过本文给大家对比分析了Django的Q查询及AngularJS的Datatables分页插件,非常不错,具有参考借鉴价值,需要的朋友可以参考下

使用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的效果如下图所示:

下面讲一下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分页插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 前端实现文件下载的几种常用方式总结

    前端实现文件下载的几种常用方式总结

    这篇文章主要给大家介绍了关于前端实现文件下载的两种常用方式,两种方法均通过创建临时URL并触发下载实现,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • javascript继承机制实例详解

    javascript继承机制实例详解

    这篇文章主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • 基于JS代码实现图片在页面中旋转效果

    基于JS代码实现图片在页面中旋转效果

    这篇文章主要介绍了基于JS代码实现图片在页面中旋转效果 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript实现不同颜色Tab标签切换效果

    javascript实现不同颜色Tab标签切换效果

    这篇文章主要为大家详细介绍了javascript实现不同颜色Tab标签切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JS中通过slice()&substring()截取字符串前几位的方法

    JS中通过slice()&substring()截取字符串前几位的方法

    在Javascript使用字符串中,我们不一定需要全部的字符串,这时就需要截取字符串,本文主要介绍js中截取字符串前几位的两种方法:1、使用slice() 方法;2、使用substring() 方法,本文通过示例代码介绍的非常详细,需要的朋友参考下吧
    2023-12-12
  • 实现51Map地图接口(示例代码)

    实现51Map地图接口(示例代码)

    这篇文章主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 浅谈JavaScript作用域和闭包

    浅谈JavaScript作用域和闭包

    本篇文章主要介绍了JavaScript作用域和闭包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS中的事件委托实例浅析

    JS中的事件委托实例浅析

    这篇文章主要介绍了JS中的事件委托,结合实例形式简单分析了javascript事件委托的概念、功能、使用方法及相关注意事项,需要的朋友可以参考下
    2018-03-03
  • 简单谈谈javascript Date类型

    简单谈谈javascript Date类型

    Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。本文就给大家简单讲述一下DATE类型的使用。
    2015-09-09
  • JS倒计时代码汇总

    JS倒计时代码汇总

    这篇文章主要介绍了JS倒计时代码,实例汇总了几种常见的倒计时代码,适用于不同的应用场合,是非常实用的技巧,需要的朋友可以参考下
    2014-11-11

最新评论