表格代码

    <div class="m-table">
<el-table :data="logs" style="width: 100%" stripe height="calc(100% - 60px)" @sort-change="sortChange" :header-cell-style="{
'background-color': '#fafafa',
'color': 'rgb(103, 194, 58)',
'border-bottom': '1px rgba(103, 194, 58, 0.43) solid'
}" :default-sort = "{prop: 'operatetime', order: 'descending'}">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand2">
<el-form-item label="账号(md5)">
<span>{{ props.row.account }}</span>
</el-form-item><br/>
<el-form-item label="目标链接">
<div>{{ props.row.url }}</div>
</el-form-item>
<el-form-item label="提交内容">
<div style="white-space: initial; width: calc(100% - 90px)">{{ props.row.post }}</div>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="用户昵称" prop="nickname" sortable :header-align="table_align" :align="table_align"></el-table-column>
<el-table-column label="操作类型" prop="type" sortable="custom" :header-align="table_align" :align="table_align"></el-table-column>
<!--<el-table-column label="目标链接" prop="url" sortable :header-align="table_align" :align="table_align"></el-table-column>-->
<el-table-column label="操作时间" prop="operatetime" sortable :header-align="table_align" :align="table_align"></el-table-column>
<el-table-column label="序号" type="index" width="50"></el-table-column>
</el-table>
</div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="currentSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>

相关js

  data () {
return {
currentPage: 1,
currentSize: 10,
total: 0,
table_align: 'left',
logs: [],
logType: '',
logTypes: [],
timeRange: [],
keyStr: '',
order: 'desc',
orderProp: 'operatetime',
times: [
{value: 1, unit: '小时'},
{value: 3, unit: '小时'},
{value: 6, unit: '小时'},
{value: 12, unit: '小时'},
{value: 1, unit: '天'},
{value: 3, unit: '天'},
{value: 7, unit: '天'},
{value: 1, unit: '月'},
{value: 3, unit: '月'},
],
pickerOptions: {
shortcuts: []
}
}
},
methods:{
getFilter(){
let filters = []
if(this.logType !== '')
filters.push({
prop: ['url'],
type: 'and',
operator: 'like',
value: this.logType
})
if(this.keyStr !== '')
filters.push({
prop: ['nickname', 'post'],
type: 'or',
operator: 'like',
value: this.keyStr
})
if(this.timeRange.length===2)
filters.push({
prop: 'operatetime',
operator: 'between',
value: this.timeRange
})
return JSON.stringify(filters)
},
getData(page){
if(page) this.currentPage = page
let obj = {
page: page || this.currentPage,
size: this.currentSize,
filters: this.getFilter(),
order: this.order,
orderProp: this.orderProp
}
this.$http.post(BASE_URL+'log/list', obj, {emulateJSON: true}).then((response) => {
this.logs = response.data.data
this.total = response.data.total
this.logs.forEach(log=>{
log.type = ''
for(let i in LOG.type){
if(log.url.indexOf(i)>=0)
log.type += LOG.type[i]
}
log.operatetime = TIME_FORMATE(log.operatetime)
if(log.nickname===null) log.nickname='--'
if(log.account===null) log.account='--'
})
}, (response) => {
// error callback
});
},
handleSizeChange(size){
this.currentSize = size
this.getData(1)
},
handleCurrentChange(page){
this.currentPage = page
this.getData()
},
sortChange(column){
if(column.prop === 'type') column.prop = 'url'
switch (column.order){
case 'ascending': this.order = 'asc'; break
case 'descending': this.order = 'desc'; break
default: this.order = ''
}
this.orderProp = column.prop
this.getData(1)
},
initTypeSelector(){
this.logTypes = []
for(let i in LOG.type){
this.logTypes.push({
label: LOG.type[i],
value: i
})
}
},
selectInit(){
this.logType = ''
this.timeRange = []
this.keyStr = ''
this.getData(1)
},
createTimes(){
this.pickerOptions.shortcuts = [{
text: '清除时间',
onClick(picker) {
picker.$emit('pick', []);
}
}]
this.times.forEach(t=>{
this.pickerOptions.shortcuts.push({
text: '最近'+TOCN(t.value)+t.unit,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - t.value*TIMETYPE[t.unit]);
picker.$emit('pick', [start, end]);
}
})
})
}
},
created(){
this.createTimes()
this.initTypeSelector()
this.getData()
}

相关python

@app.route('/log/list', methods=['POST', 'OPTIONS'])
@loginCheck
def list_log(): if request.method == 'POST':
page = int(request.form['page'])
size = int(request.form['size'])
condition = parseFilters(request)
order = parseOrder(request) dbsession = DBSession()
sql_str = '''SELECT T2.* from(
SELECT T.*, rownum RN FROM(
SELECT * FROM v_log where %s %s
)T) T2 WHERE RN BETWEEN :rowBegin and :rowEnd
'''%(condition, order)
print sql_str
logs = dbsession.execute(sql_str, {
'rowBegin': (page-1)*size+1,
'rowEnd': page*size
})
total = dbsession.execute('select count(*) from v_log where %s' %condition).first()[0] dbsession.close()
return jsonify({'result': '', 'data': [{
'account': log.account,
'nickname': log.nickname,
'url': log.url,
'post': log.post,
'operatetime': log.operatetime
} for log in logs], 'total': total})
return jsonify({'result': ''}) 后台管理,就没考虑sql注入,写的比较烂
def parseFilters(request):#解析页面传过来的各种条件
filters = request.form['filters']
sqlStr = '1=1 '
filters = json.loads(filters) for f in filters: if f['operator'] == 'between':#特殊处理,接收时间
timeStr = "to_date('%s','yyyy-MM-dd HH24:mi:ss')"
sqlStr += "and %s between %s and %s" %(f['prop'], timeStr%f['value'][0], timeStr%f['value'][1]) elif f['operator'] == 'like':
temp = '1=1' if f['type'] == 'and' else '1=2'
for prop in f['prop']:
temp += " %s %s like '%%%s%%'"% (f['type'], prop, f['value'])
sqlStr += 'and (%s)'%temp elif f['operator'] in ['=', '>', '<']:
temp = '1=1' if f['type'] == 'and' else '1=2'
for prop in f['prop']:
temp += " %s %s %s '%s'" %(f['typo'], prop, f['operator'], f['value'])
sqlStr += 'and (%s)' % temp
return sqlStr def parseOrder(request):
order = request.form['order']
orderProp = request.form['orderProp']
if order=='':
return ''
else:
return 'order by %s %s'%(orderProp, order)

elementUI 表格分页后台排序记录的更多相关文章

  1. vue+ElementUI——表格分页(前端实现方法)

    1.使用ElementUI中的<el-table></el-table>和 <el-pagination></el-pagination>组件来实现 2 ...

  2. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  3. 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  4. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  5. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

  6. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  7. ngTbale假分页实现排序、搜索、导出CSV等功能

    一. ngTable功能简化 使用ngTable经常有分页,排序,过滤等功能,实现诸多功能较为麻烦.为了方便开发过程,可以抽取一些table共同点写一个公有方法. 注意: 1. 由于很多特别的需求,可 ...

  8. Ecside基于数据库的过滤、分页、排序

    首先ecside展现列表.排序.过滤(该三种操作以下简称为 RSF )的实现原理完全和原版EC一样, 如果您对原版EC的retrieveRowsCallback.sortRowsCallback.fi ...

  9. 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

随机推荐

  1. JMeter:生成漂亮的接口/压力测试的HTML报告

    JMeter生成HTML网页报告(非gui模式操作) 我们做性能测试的时候会经常使用一些性能测试工具,比如loardrunner和jmeter,我个人比较喜欢Jmeter这个工具,jmeter之前版本 ...

  2. [T-ARA][놀아볼래?][要玩吗]

    歌词来源:http://music.163.com/#/song?id=22704479 作曲 : 赵英秀/김태현 [作曲 : 赵英秀/k/gim-Tae-hyeon] 作词 : 安英民 [作词 : ...

  3. jqgrid查找

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  4. 基于python的机器学习实现日元币对人民币汇率预测

    ## 导入所需的包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import tensorflow a ...

  5. RAC系统化学习

    1.RACSignal:   // 只要订阅者调用sendNext,就会执行nextBlock // 只要订阅RACDynamicSignal,就会执行didSubscribe // 前提条件是RAC ...

  6. Alpha冲刺第8天

    Alpha第8天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  7. Spring transaction与EJB transaction的关系

    TransactionDefinition Interface that defines Spring-compliant transaction properties. Based on the p ...

  8. git 客户端连接gitlab 实现简单的CI/CD

    1. git 客户端的安装 下载: https://git-scm.com/download/win 截至最近:20180728最新版本 2.18的下载地址 https://github-produc ...

  9. 一条sql语句搞定基于mysql的sql执行顺序的基本理解

    对数据库基本操作是每个程序员基本功,如何理解并快速记住sql执行的顺序呢,其实一条复杂的sql就能搞定: SELECT DISTINCT <select_list> FROM <le ...

  10. KSOA单据保护表中Clientid解析为mac和ip

    SELECT DISTINCT a.*,ISNULL(c.client_net_address,'') AS client_net_address FROM ( SELECT * ,),,) ) ), ...