Django 使用 bootstrap-table插件,表格分页 + UTC、时间戳 互转
2017-10-25 14:15
966 查看
前端html代码:
前端js代码:
后端python代码:
后端python 查询数据库:
json文件:
<div id="queryResult" class="well" style="width: 91%;"> <table id="order_list"></table> </div>
前端js代码:
// 查询订单 请求 $(document).ready(function () { $('#queryOrderBtn').click(function () { if ( !$('#rechargeStartTime').val() || !$('#rechargeEndTime').val() ) { alert('充值时间不能为空!'); } else { createOrderTable(); } }) }); // 查询订单 返回结果 调用bootstrap-table插件 function createOrderTable(params) { $('#order_list').bootstrapTable('destroy'); //每次加载前,先销毁原来的表,相当于“刷新” postOrderData = function (params) { var temp = { // limit: params.limit, //页面大小,后端处理分页时,需要提供 // offset: params.offset, //页码,后端处理分页时,需要提供 "zoneID": $('#zoneID').val(), "channelID": $('#channelID').val(), "payType": $('#payType').val() }; return temp; }; $('#order_list').bootstrapTable({ url: '/queryOrder', method: 'post', contentType:"application/x-www-form-urlencoded; charset=UTF-8", // 默认是:'application/json', 不改的话,后台获取不到数据! ###### 非常重要!!###### queryParams: postOrderData, //查询参数 cache: false, //是否启用 数据缓存 pagination: true, //是都分页 sidePageination: 'client', //谁来分页,客户端:'client',服务端:'server' pageNumber: 1, //默认显示 首页 pageSize: 20, //每页需要显示的数据量 pageList: [10, 25, 50], //可供选择的,每页需要显示的数据量 height: 420, //表格高度 uniqueId: 'gameorderid', silent: true, // 刷新服务器数据 showExport: true, exportDataType: 'all', // rowStyle: function (row, index) { //自定义行样式,但是权重 < columns里的样式,貌似也不支持 cellStyle方法 // if (index == $('#order_sum').bootstrapTable('getData').length-1) { // return { // css: { // "color": "red", // "text-align": "center" // } // }; // } // return {}; // }, columns: [{ field: 'gameorderid', title: '游戏订单号', valign: 'middle', align: 'left', halign: 'center' }, { field: 'orderid', title: '渠道订单号', valign: 'middle', align: 'left', halign: 'center' }, { field: 'RegisterTime', title: '注册时间', valign: 'middle', align: 'left', halign: 'center' }, { field: 'AccountId', //前后端 该字段必须一致!否则,后端传回来的数据,前端无法识别! title: '玩家ID', valign: 'middle', align: 'left', halign: 'center' }], // data: [ // {"AccountId":222}, // ] responseHandler: function(res) { //处理 从后端 返回的数据 console.log(res); if (res == 0) { alert('查询出问题!'); } else { var orderListData = res['rows']; //##### 重要!!##### return orderListData; } }, onLoadError: function (status) { console.log(status); $('#order_list').bootstrapTable('removeAll'); } }) }
后端python代码:
def query_order(request): data = request.POST # 获取 bootstrap-table post请求的数据,直接POST获取! queryResult = db_queryOrder(data) #去数据库查询 if queryResult == 0: return HttpResponse('0') elif queryResult == -1: return HttpResponse('-1') else: '''服务端分页时,前端需要传回:limit(每页需要显示的数据量),offset(分页时 数据的偏移量,即第几页)''' '''mysql 利用 limit语法 进行分页查询''' '''服务端分页时,需要返回:total(数据总量),rows(每行数据) 如: {"total": total, "rows": []}''' returnData = {"rows": []} #########非常重要############ with open("slg/others/country", "r") as f: datas = json.loads(f.read()) # 直接读出来,是dic对象,用key,value获取。。。上面的是转换为 对象了,可以用 “.” 获取 '''遍历 查询结果集''' for results in queryResult: '''遍历 country.json 输出 订单状态''' for data in datas['order']: if data['stateNum'] == str(results['purchasestate']): orderStateResult = data['stateResult'] '''遍历 country.json 输出 国家名称''' for data in datas['country']: if data['shorthand'] == results['countrycode']: countryName = data['name'] returnData['rows'].append({ "gameorderid": results['gameorderid'], "orderid": results['orderid'], "nickname": results['nickname'], "gameName": "Wrath", "PurchaseTimes": results['purchasetimes'], "PriceAmount": str(results['priceamount']), "PurchaseState": orderStateResult, "PurchaseTime": time.strftime("%Y-%m-%d %H:%M:%S %Z", time.gmtime(results['purchasetime'])), #将 时间戳 转换为 UTC时间 "AccountId": results['accountid'], "CountryCode": countryName }) #最后用dumps包装下,json.dumps({"rows": [{"gameorderid": 1}, {"gameorderid": 22}]}) return HttpResponse(json.dumps(returnData))
后端python 查询数据库:
from . import db_models as db import time import traceback # 查询订单 def db_queryOrder(data): ''' 充值时间 ''' rechargeStartTime = toTimeStamp(data['rechargeStartTime']) rechargeEndTime = toTimeStamp(data['rechargeEndTime']) result = db.TbBills.objects.filter(purchasetime__gte=rechargeStartTime, purchasetime__lte=rechargeEndTime).values() #### 一定要获取它的 Fields 数据!##### ''' 区服 ''' if data['zoneID']: result = result.filter(zoneid=data['zoneID']) ''' 充值金额 ''' if data['rechargeStartMoney'] and data['rechargeEndMoney']: result = result.filter(priceamount__gte=rechargeStartMoney, priceamount__lte=rechargeEndMoney) try: if result.count() == 0: return 0 else: return result except BaseException: print(traceback.format_exc()) return -1 # 格式化时间(UTC) --> struct_time(时间元祖) --> 时间戳 转换方法 def toTimeStamp(times): structTime = time.strptime(times, "%Y-%m-%d %H:%M:%S") timeStramp = time.mktime(structTime) return timeStramp
json文件:
{ "order": [ {"stateNum": "-1", "stateResult": "已创建"}, {"stateNum": "0", "stateResult": "成功"} ], "country": [ {"name":"阿富汗","shorthand":"AF"}, {"name":"阿尔巴尼亚","shorthand":"AL"} ] }
相关文章推荐
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
- 【前端H5】bootstrap-table表格插件使用js设置高度及高度自适应
- bootstrap-table表格插件之服务器端分页实例
- bootstrap 表格插件bootstrap-table的使用
- 使用bootstrap-table表格插件实现表格
- 7 Django系列之关于bootstrap-table插件的简单使用
- bootstrap table插件的分页与checkbox使用详解
- bootstrap-table分页插件使用
- BootStrap中Table分页插件使用详解
- bootstrap-table表格插件之服务器端分页实例
- bootstrap-paginator 个性化分页插件使用
- bootstrap 的分页js组件 bootstrap-table 使用
- bootstrap datetimepicker2.3.11时间插件使用
- Bootstrap插件系列——Bootstrap-table初始化、分页、客户端搜索、服务端搜索
- 关于Bootstrap Table使用生成冻结窗格的表格
- 使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议
- 使用bootstrap-table插件