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. 下载完整版Chrome离线安装文件的官方地址

    只在自己账号下安装Download Google Chrome Standalone Offline Installer (32-bit)  http://www.google.com/chrome/ ...

  2. java.lang.IllegalStateException: Failed to load ApplicationContext selenium 异常 解决

    WARN <init>, HHH000409: Using org.hibernate.id.UUIDHexGenerator which does not generate IETF R ...

  3. 【Java】解析JScrollPane类的使用

    在这篇博文中,笔者介绍JScrollPane类的使用,JScrollPane类可以为组件添加滚动条.在这里笔者不会详细介绍该类的方法有哪些,因为在API上已经写得一清二楚了.在这篇博文中,笔者重点介绍 ...

  4. Win10下Clion配置opencv3

    本人不想在爱机装一个vs2013或者vs2015这种庞然大物,可是手头要弄一个基于windows的opencv项目,就只好装了个Clion,期间踩了不少坑,记录一下. 参考网址:http://www. ...

  5. 替换SQL字段中的换行符,回车符

    替换SQL字段中的换行符,回车符: 在富文本内容中通常会出现回车.换行内容.在sql数据库中这些回车.换行符,输出html后,表现为空格. 这里是在数据导出.导入中发现的,通常把回车.换行符找出来,用 ...

  6. 基于matplotlib的数据可视化 - 笔记

    1 基本绘图 在plot()函数中只有x,y两个量时. import numpy as np import matplotlib.pyplot as plt # 生成曲线上各个点的x,y坐标,然后用一 ...

  7. Red Hat忘记root密码了怎么办?

    方法很简单: 在出现grub画面时,用上下键选中平时启动linux的那一项,然后按a键,可以进行append模式 在出来的命令行等方面加上 空格 single , 这样可以进入单用户模式,再 pass ...

  8. mysql单机多实例

    在数据库服务器上,可以架构多个Mysql服务器,进行单机多实例的读写分离: 可以通过mysqld_multi来进行多实例的管理,mysqld_multi是用perl写的脚本,原理是通过mysql_ad ...

  9. Python读文本文件中文乱问题

    file_object = open('thefile.txt')try: all_the_text = file_object.read().decode("gb2312")fi ...

  10. 在一个gradle 的maven property 里添加多个URL

    这样是会报错的 repositories { mavenCentral() maven { url "http://maven.springframework.org/release&quo ...