TypeScript代码:

      let tabledata = data as any[];
if (this.dataTable) {
this.dataTable.clear();
this.dataTable.destroy(); }
/*
* ip = models.IPAddressField()
access_time = models.DateTimeField()
method = models.CharField()
url = models.CharField()
protocol = models.CharField()
status_code = models.SmallIntegerField()
size = models.BigIntegerField()
referer = models.CharField()
client = models.CharField()
detail = models.CharField()*/
let search:boolean|object;
if (this.searchParams.keyword && this.searchParams.keyword.length>0){
search = {"search": this.searchParams.keyword};
}else {
search = {};
}
this.dataTable = $('#eventstable').DataTable({
'data' : tabledata,
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : false,
'autoWidth' : false,
'columns': [
{ title: "access_time", 'data': "access_time" },
{ title: "detail", 'data': "detail" }
]
});

事件注册代码,ES6的:

            let table = $('#dataTable').DataTable( {
data: data,
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : false,
'autoWidth' : true,
//使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
//data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
columns: [
{ data: 'id',title:"ID" },
{ data: 'name',title:"名称" },
{ data: 'id',title:"操作" ,"render":function (data, type, row, meta ) {
return'<button type="button" data-id="'+data+'" class="btn btn-primary btn-sm">执行</button>';
}}
]
} );
$("button.btn-sm").on("click",function (event) {
console.log($(event.target).attr("data-id"))
return false
})
table.on("draw",function () {
console.log("draw------>")
$("button.btn-sm").on("click",function (event) {
console.log($(event.target).attr("data-id"))
return false
}) })

解释一下,为什么这么写,初始化完需要注册一次,每次页面page或者排序draw完需要再注册一次,比较奇怪的事第一次init以后的draw不会引发draw事件,所以不得不为第一次初始化完成绑定了一次。

DataTable的初始化与事件注册的更多相关文章

  1. libevent (三) 事件注册与循环监听

    事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始 ...

  2. React笔记-事件注册

    事件机制 本系列以React v16.8.3为基础进行源码分析 React事件主要分为两部分: 事件注册与事件分发.下面先从事件注册说起. 事件注册 假设我们的程序如下: <!DOCTYPE h ...

  3. C#中的事件注册和注销

    C#中的事件注册和注销 由于.NET框架对消息循环机制进行了很好的封装,开发人员不再需要深入的了解Windows事件/消息实现的具体机制,也无需创建复杂的事件结构体和所谓的消息句柄.我们所要做的无非就 ...

  4. Flex timer使用 keydown事件注册到stage

    Flex timer使用 keydown事件注册到stage: <?xml version="1.0" encoding="utf-8"?> < ...

  5. flex 事件注册和鼠标拖动

    flex 事件注册和鼠标拖动 <?xml version="1.0" encoding="utf-8"?> <s:Application xm ...

  6. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  7. jquery datatable数据初始化

    一个datatable的初始化问题,困扰了在下整整半天,最后在网上各位大神的帮助下,终于解决了. 首先分析一下我所遇到的问题: 在HTML上有个下拉框,我需要获取下拉框的值来从后台数据库中获取不同的数 ...

  8. datatable的点击事件

    datatable的点击事件 在项目中遇到一个问题,在动态绑定到datatables上的数组,要是用table中的两个某一行中数据作为参数,通过鼠标点击进行获取,查阅官方文档得以解决: //首先定义一 ...

  9. jQuery 事件注册

    重点事件注册.on() <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

随机推荐

  1. everything基于Windows平台快速搜索文件

    在Windows搜索文件,自带的搜索效率很低.高效.速度是你忠心的选择... 速度真是杠杠的 下载: http://www.voidtools.com/downloads/ https://files ...

  2. 转:CMake快速入门教程-实战

    CMake快速入门教程:实战 收藏人:londonKu     2012-05-07 | 阅:10128  转:34    |   来源   |  分享               0. 前言一个多月 ...

  3. EMS_PM_STORAGE

    /*Navicat MySQL Data Transfer Source Server : 10.62.102.118Source Server Version : 50712Source Host ...

  4. PL/SQL报无效的窗口句柄的解决办法

    在远程服务器上使用pl sql developer查询oralce数据库的时候,遇到很长的文本变量想点开小窗口看下具体内容, 但系统弹窗提示“无效的窗口句柄”,听同事介绍原来需要开启一个windows ...

  5. \u Unicode和汉字转化

    介绍 \uxxxx这种格式是Unicode写法,表示一个字符,其中xxxx表示一个16进制数字,范围所0-65535. Unicode十六进制数只能包含数字0-9.大写字母A-F或者小写字母A-F.需 ...

  6. Swift3 substring几种常用用法

    举例: " let length = str.characters.count //截取前四位 )) //截取后2位(两种方法) )) )) //截取中间4位,从第2位开始(二种方法) le ...

  7. scipy稀疏矩阵

    那些零元素数目远远多于非零元素数目,并且非零元素的分布没有规律的矩阵称为稀疏矩阵(sparse matrix). 不同类型的矩阵有不同的压缩方式,比如对角矩阵只存储对角元素即可.要想充分压缩,就要找到 ...

  8. 【经验总结】 fisheye 3.1.5 安装、破解全过程 图文教程(2.0以上版本均可成功!)

    声明:此破解仅为个人娱乐,如果你有钱,请支持正版! 重要说明,只要把fisheye先关掉即可,然后执行下面的破解步骤,一样可以破解!本人已测试通过. 一.安装.破解fisheye最新版3.1.5 所需 ...

  9. 树莓派进阶之路 (019) - 树莓派通过filezilla,samba与PC文件共享(转)

    虽然我们可以很方便的通过ssh譬如putty或者vnc连接操控树莓派,但是毕竟树莓派资源没那么高,在上面编程,调试要吃力的多.所以还是想在pc上编程上传到树莓派或者最好,文件共享,可以直接读写共同的文 ...

  10. C结构体数组的应用

    #include <stdio.h> //定义结构体存储学生成绩信息 struct address_list{ ]; ]; ]; } info[]; void save(char *nam ...