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>&nbsp;<i class="fa fa-times" id="delete">删除</i>&nbsp;<i class="fa fa-star-o" id="focus">关注</i>&nbsp;<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>&nbsp;<i class="fa fa-times" id="delete">删除</i>&nbsp;<i class="fa fa-star-o" id="focus">关注</i>&nbsp;<i class="fa fa-share-square-o" id="share">分享</i>';}
     else {return '<i class="fa fa-edit" id="edit">编辑</i>&nbsp;<i class="fa fa-times" id="delete">删除</i>&nbsp;<i class="fa fa-star" id="focus">已关注</i>&nbsp;<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的更多相关文章

  1. DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)

    PowerBI  - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...

  2. MySQL高可用架构之Mycat-关于Mycat安装和参数设置详解

    MySQL高可用架构之Mycat-关于Mycat安装和参数设置详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Mycat介绍 1>.什么是Mycat Mycat背后是 ...

  3. Scala 深入浅出实战经典 第60讲:Scala中隐式参数实战详解以及在Spark中的应用源码解析

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  4. java newInstance() 的参数版本与无参数版本详解

    newInstance() 的参数版本与无参数版本详解 博客分类: Core Java   通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.new ...

  5. SpringCloud Eureka参数配置项详解

    SpringCloud Eureka参数配置项详解(转) Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下 ...

  6. druid 参数配置详解

    druid 参数配置详解 */--> druid 参数配置详解 Table of Contents 1. 初始化连接 2. 参数配置及说明 3. 注意事项 3.1. 底层连接 3.2. 空闲检查 ...

  7. socket参数的详解

    socket参数的详解 socket.socket(family=AF_INET,type=SOCK_STREAM,proto=0,fileno=None) 创建socket对象的参数说明: fami ...

  8. Scala 深入浅出实战经典 第62讲:Scala中上下文界定内幕中的隐式参数实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  9. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

随机推荐

  1. Python:Day03 变量、字符编码

    配置环境变量 右键计算机--->属性--->高级系统设置--->高级--->环境变量--->系统变量--->找到Path,双击编辑--->将程序的路径粘贴上去 ...

  2. 深度学习框架PyTorch一书的学习-第四章-神经网络工具箱nn

    参考https://github.com/chenyuntc/pytorch-book/tree/v1.0 希望大家直接到上面的网址去查看代码,下面是本人的笔记 本章介绍的nn模块是构建与autogr ...

  3. linux命令之 tar

    参数 -c 创建新归档 -d 比较归档和文件系统的差异 -r 追加文件到归档 -t 存档的内容列表 -x 提取归档所有文件 -C 改变解压目录 -f 使用归档文件或设备归档 -j bzip2 压缩 - ...

  4. leetcode 74. Search a 2D Matrix 、240. Search a 2D Matrix II

    74. Search a 2D Matrix 整个二维数组是有序排列的,可以把这个想象成一个有序的一维数组,然后用二分找中间值就好了. 这个时候需要将全部的长度转换为相应的坐标,/col获得x坐标,% ...

  5. 操作循环的关键字switch,break,return的应用及区别

    break 使用break结束循环  break可以终止循环 和 switch语句的运行; break用于结束一个循环,即跳出循环体,执行循环体之后的代码: switch 使用continue提前结束 ...

  6. Python脱产8期 Day10 2019/4/24

    一 函数 1.定义:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数>>工具. 2.函数的优点:1.避免代码的冗余:2.让程序结构代码更加清晰:3.让代码更加具 ...

  7. Luogu P2056 [ZJOI2007]捉迷藏

    入坑动态点分治的题目,感觉还不错被卡常后重构代码 首先静态点分治相信大家肯定都会,就是不断找重心然后暴力计算每棵子树内的贡献. 这题如果只有单次询问,我们很容易想到对于每个分治中心的所以儿子的子树中找 ...

  8. Shiro安全框架入门笔记

    入门 1.simpleRealmTest package cn.realm; import org.apache.shiro.SecurityUtils; import org.apache.shir ...

  9. java的instanceof关键字

    java 中的instanceof 运算符是用来判断对象是否是 特定类或这个特定类的子类 的一个实例. 用法: result = object instanceof class 参数: Result: ...

  10. (第十三周)Final Review会议

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 Final Review会议 时间:2016.12.2   13:00——15:00 地点:冬华楼一楼大厅 会 ...