插件 DataTable 创建列表 render参数的详解与如何传递本行数据id
1、首先 导入DataTable 的插件
2、定义表结构:
HTML:
<table>
<thead>
<tr>
<th>id</th>
<th>任务名称</th>
<th>状态</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS:
var myparas = "?stime="+GetIt["stime"]+"&etime="+GetIt["etime"]+"&which="+GetIt["which"]+"&due="+GetIt["due"];
var table = $("datatable-buttonss").DataTable({
"lengthMenu": [16, 32, 48], // 定义每页展示数据数量
"aaSorting": [[ 2, "desc" ]], // 初始化根据第3列降序排列
"searching": true, //全文搜索
"bPaginate": true, //翻页功能
"bInfo": true, //页脚信息
"bAutoWidth": false,//自动宽度
"bProcessing": true, //DataTables载入数据时,是否显示‘进度’提示
ajax:"/task_mgm/taskDataMine2" + myparas, // ajaxs向后台请求数据
"columnDefs":[ // 自定义列功能
{
"targets": [ 0 ], //目标列
"Sorting": false, // 是否支持排序
"width": "5%", // 列宽
"visible": false, // 列不可见
},
{
"targets": [ 1 ],
"Sorting": false,
"render": function ( data, type, row, meta ) // data:表格数据 row:该行所有数据 数组形式 所以 data==row[1]
{return type === 'display' && data.length > 20?'<span title="'+data+'">'+data.substr( 0, 16 )+'...</span>' :data;}
}, // 给长字符串加省略号
{
"targets": [ 2 ],
"width": "28%",
"orderable": false,
"defaultContent": '<i class="fa fa-edit" id="edit">编辑</i> <i class="fa fa-times" id="delete">删除</i> <i class="fa fa-star-o" id="focus">关注</i> <i class="fa fa-share-square-o" id="share">分享</i>',
"render": function (data, type, full) {
if(data == 0){return '<i class="fa fa-edit" id="edit">编辑</i> <i class="fa fa-times" id="delete">删除</i> <i class="fa fa-star-o" id="focus">关注</i> <i class="fa fa-share-square-o" id="share">分享</i>';}
else {return '<i class="fa fa-edit" id="edit">编辑</i> <i class="fa fa-times" id="delete">删除</i> <i class="fa fa-star" id="focus">已关注</i> <i class="fa fa-share-square-o" id="share">分享</i>';}
}
},
]
})
<script>
// 获取任务id 来编辑任务的 两种方式:
$(function){
// 1) 通过 编辑按钮 编辑任务
$("#datatable-buttonss tbody").on('click', '#edit', function () {
var data = table.row($(this).parents('tr')).data(); //获取本行数据 数组形式
window.location.href='/task_mgm/taskinfo_editID='+data[0]; // data[0] 第一列数据 即后端传来的任务id
});
// 2) 通过 点击任务名 通过a标签链接编辑任务
{
"targets": [ 1 ],
"sorting": false,
"render": function(data, type, full) { // full 以数组形式存放本行数据 full[0]:任务id full[1]:任务名
return '<a id="shareInfo" href="/task_mgm/taskinfo_editID='+full[0]+'">'+ full[1] +'</a>'}
// 3) 通过1,2方法的组合 即点击任务名 触发事件
{
"targets": [ 1 ],
"sorting": false,
"render": function(data, type, full) { // full 以数组形式存放本行数据 full[0]:任务id full[1]:任务名
return '<a id="shareInfo" href="#'">'+ full[1] +'</a>'
}
$("#datatable-buttonss tbody").on('click', '#shareInfo', function () {
var data = table.row($(this).parents('tr')).data();
window.location.href="/task_mgm/taskinfo_editID="+data[0];
});
}
</script>
后端flask:
返回的数据格式:['data': [ [0, '第一个任务',0], [1, ‘第二个任务’, 0], [2,‘第三个任务’,1]] ]
所以要用工具函数构造此数据, 然后调用该函数返回数据:
def sql3json(objs, fields): # objs是查询的数据库对象tasks fields是包含该对象表结构的列属性的列表['id', 'taskName', 'ifFocus']
tabledata = {"data": []}
for obj in objs:
row = [None]*len(fields)
for field in [x for x in dir(obj) if x in fields]:
if field == 'urgentId':
data = obj.urgence.urgentName
else:
data = obj.__getattribute__(field)
if data is None:
data = ''
if data is False:
data = 0
if data is True:
data = 1
if isinstance(data, datetime.datetime):
data = data.strftime('%Y-%m-%d %H:%M')
if data == '2099-01-01':
data = '时间未定'
row[fields.index(field)] = data
tabledata["data"].append(row)
tabledata = repr(tabledata).replace("'", "\"") # 输出字符串形式,且以“”作为字符串的头尾
return tabledata
# 我的任务数据
@task_mgm.route('/taskDataMine', methods=['GET', 'POST'])
@sso_wrapper
def taskinfo_dataMine_fun():
# 应该根据用户名或ID 的到自己的任务 现在先暂时应任务ID
tasks = Task.query.filter(and_(Task.isDelete != 1, Task.endState != 1)).order_by(Task.urgentGrade.desc()).all()
data = sql3json(tasks, ["id", "taskName", "ifFocus"])
data = data.replace("None", "\" \"")
return data
插件 DataTable 创建列表 render参数的详解与如何传递本行数据id的更多相关文章
- DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)
PowerBI - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...
- MySQL高可用架构之Mycat-关于Mycat安装和参数设置详解
MySQL高可用架构之Mycat-关于Mycat安装和参数设置详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Mycat介绍 1>.什么是Mycat Mycat背后是 ...
- Scala 深入浅出实战经典 第60讲:Scala中隐式参数实战详解以及在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- java newInstance() 的参数版本与无参数版本详解
newInstance() 的参数版本与无参数版本详解 博客分类: Core Java 通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.new ...
- SpringCloud Eureka参数配置项详解
SpringCloud Eureka参数配置项详解(转) Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下 ...
- druid 参数配置详解
druid 参数配置详解 */--> druid 参数配置详解 Table of Contents 1. 初始化连接 2. 参数配置及说明 3. 注意事项 3.1. 底层连接 3.2. 空闲检查 ...
- socket参数的详解
socket参数的详解 socket.socket(family=AF_INET,type=SOCK_STREAM,proto=0,fileno=None) 创建socket对象的参数说明: fami ...
- Scala 深入浅出实战经典 第62讲:Scala中上下文界定内幕中的隐式参数实战详解
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- js实现的新闻列表垂直滚动实现详解
js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...
随机推荐
- Python:Day03 变量、字符编码
配置环境变量 右键计算机--->属性--->高级系统设置--->高级--->环境变量--->系统变量--->找到Path,双击编辑--->将程序的路径粘贴上去 ...
- 深度学习框架PyTorch一书的学习-第四章-神经网络工具箱nn
参考https://github.com/chenyuntc/pytorch-book/tree/v1.0 希望大家直接到上面的网址去查看代码,下面是本人的笔记 本章介绍的nn模块是构建与autogr ...
- linux命令之 tar
参数 -c 创建新归档 -d 比较归档和文件系统的差异 -r 追加文件到归档 -t 存档的内容列表 -x 提取归档所有文件 -C 改变解压目录 -f 使用归档文件或设备归档 -j bzip2 压缩 - ...
- leetcode 74. Search a 2D Matrix 、240. Search a 2D Matrix II
74. Search a 2D Matrix 整个二维数组是有序排列的,可以把这个想象成一个有序的一维数组,然后用二分找中间值就好了. 这个时候需要将全部的长度转换为相应的坐标,/col获得x坐标,% ...
- 操作循环的关键字switch,break,return的应用及区别
break 使用break结束循环 break可以终止循环 和 switch语句的运行; break用于结束一个循环,即跳出循环体,执行循环体之后的代码: switch 使用continue提前结束 ...
- Python脱产8期 Day10 2019/4/24
一 函数 1.定义:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数>>工具. 2.函数的优点:1.避免代码的冗余:2.让程序结构代码更加清晰:3.让代码更加具 ...
- Luogu P2056 [ZJOI2007]捉迷藏
入坑动态点分治的题目,感觉还不错被卡常后重构代码 首先静态点分治相信大家肯定都会,就是不断找重心然后暴力计算每棵子树内的贡献. 这题如果只有单次询问,我们很容易想到对于每个分治中心的所以儿子的子树中找 ...
- Shiro安全框架入门笔记
入门 1.simpleRealmTest package cn.realm; import org.apache.shiro.SecurityUtils; import org.apache.shir ...
- java的instanceof关键字
java 中的instanceof 运算符是用来判断对象是否是 特定类或这个特定类的子类 的一个实例. 用法: result = object instanceof class 参数: Result: ...
- (第十三周)Final Review会议
项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 Final Review会议 时间:2016.12.2 13:00——15:00 地点:冬华楼一楼大厅 会 ...