您的位置:首页 > Web前端 > BootStrap

Django 使用 bootstrap-table插件,表格分页 + UTC、时间戳 互转

2017-10-25 14:15 966 查看
前端html代码:

<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"}
]
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息