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. Centos6下编译安装gcc6.4.0

    Centos6自带的gcc4.4.7不支持c++11, 于是编译安装最新版的gcc wget https://gmplib.org/download/gmp/gmp-6.1.2.tar.xz .tar ...

  2. 通过Intent传递对象

    BluetoothDevice device = data.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE); 在蓝牙开发中,通过intent(data ...

  3. 【php+uploadify3.2】上传按钮点击一点反应都没有,原因

    原因: 代码没有问题,这个原因也困扰我一段时间,是由于浏览器禁用了flash,需要放开,操作方法如下: 在谷歌浏览器输入:chrome://settings/content/flash 然后添加需要该 ...

  4. Easyui入门视频教程 第07集---Accordion的使用

    Accordion 是一个 收缩的组件 类似挂历的 百度了一下 意思是 accordion 英[əˈkɔ:diən] 美[əˈkɔrdiən] n. 手风琴 adj. 可折叠的 他就是 一个折叠的 很 ...

  5. IBatis.Net 视频教程 原创教程

    IBatis.Net 视频教程 列文件:共21个 Ibatis.Net 第01课 了解 和下载.avi Ibatis.Net 第02课 搭建简单三层项目 引入Ibatis.avi ibatis.net ...

  6. socket 995 错误 boost

    这个错误的中文解释是:由于线程退出或应用程序请求,已中止 I/O 操作. 最近几天学习boost asio 在抄官方的一个实例代码时遇到 了,这个错误搞了我三天才解决,就是在一行代码中少了一个 s 所 ...

  7. java 结束程序进程 代码

    结束firefox的进程,一句代码就够了,如下: Runtime.getRuntime().exec("taskkill /F /IM firefox.exe"); 结束qq: R ...

  8. 用ElasticSearch存储日志

    介绍 如果你使用elasticsearch来存储你的日志,本文给你提供一些做法和建议. 如果你想从多台主机向elasticsearch汇集日志,你有以下多种选择: Graylog2 安装在一台中心机上 ...

  9. memcached全面剖析--3.memcached的删除机制和发展方向

    下面是<memcached全面剖析>的第三部分. 发表日:2008/7/16 作者:前坂徹(Toru Maesaka) 原文链接:http://gihyo.jp/dev/feature/0 ...

  10. 【MySQL】MySQL解析用户权限管理

    一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连接m ...