快捷導(dǎo)航

對(duì)比分析Django的Q查詢及AngularJS的Datatables分頁(yè)插件

更新時(shí)間：2017年02月07日 09:02:18 作者：飛哥ABC

通過(guò)本文給大家對(duì)比分析了Django的Q查詢及AngularJS的Datatables分頁(yè)插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

使用Q查詢，首先要導(dǎo)入Q模塊：

from django.db.models import Q

可以組合使用&,|操作符用于多個(gè)Q的對(duì)象,產(chǎn)生一個(gè)新的Q對(duì)象，Q對(duì)象也可以用~操作符放在前面表示否定，如下例所示：

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對(duì)象中，查詢條件是 '和'

其中Q查詢里面的 __icontains 表示包含的關(guān)系，用于模糊查詢，如：

Q(username__icontains=keyword) | Q(groupid__icontains=keyword) 表示查詢 username或者 groupid

再談?wù)凙ngularJS的Datatables分頁(yè)插件：

Datatables的主要功能是分頁(yè)、即時(shí)搜索和排序，雖然django自帶的模板引擎也有分頁(yè)功能(Paginator)，但無(wú)論從功能上還是美觀上，Datatables都更好。

Datatables的效果如下圖所示：

下面講一下Datatables的DTOptionsBuilder方法：

DTOptionsBuilder.newOptions是AngularJS的datatables的一個(gè)重要的方法，.newOptions用于實(shí)現(xiàn)前后端分頁(yè)，

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 表示開(kāi)啟服務(wù)器模式，

ajax表示數(shù)據(jù)的來(lái)源(包括處理分頁(yè)，排序，過(guò)濾)，

full_numbers表示所有的數(shù)據(jù)，

http_https.dtColumns = [
  DTColumnBuilder.newColumn('id').withTitle('ID'),
  DTColumnBuilder.newColumn('username').withTitle('申請(qǐng)人'),
  DTColumnBuilder.newColumn('env').withTitle('環(huán)境'),
  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('最終結(jié)果').renderWith(apply_status),
  DTColumnBuilder.newColumn('orders_created_time').withTitle('時(shí)間')
 ];
 //判斷是否是admin用戶，如果是admin，則在http_https.dtColumns這個(gè)數(shù)組中增加(push)一個(gè)元素
 if (http_https.js_admin) {
  http_https.dtColumns.push(DTColumnBuilder.newColumn(null).renderWith(actionsHtml).withTitle('Actions'))
 }

DTColumnBuilder.newColumn表示新增表格的列

.renderWith對(duì)數(shù)據(jù)進(jìn)行渲染這里apply_status是我自己寫的一個(gè)函數(shù)，用于轉(zhuǎn)換json中True和False對(duì)應(yīng)的html中的“成功、失敗”

部分詳情代碼請(qǐng)見(jiàn)我的github：https://github.com/a342058040/Django_AngularJS_Datatables.git

以上所述是小編給大家介紹的對(duì)比分析Django的Q查詢及AngularJS的Datatables分頁(yè)插件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: