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. 完美解决office2013 错误1402

    遇到1402问题  按照网络上的帖子都无法解决,老提示无权限更改,原来只是少了一个步骤而已!经本人多次试验,已经完美解决,现在上图! 步骤  肯定是得先出现错误,找到注册表所在项! 这个就不赘述,通过 ...

  2. Chrome 好玩的插件

    1 Lastpass : 用来把往各个网址的密码云端存储. 2 EditThisCookie  : 查看网页的Cookie 3 Postman Interceptor :  用来配合Postman 进 ...

  3. How to Land your Dream Job

           今天在code school上面看到一个外国人写的文章,写的很棒,瞧一下外国人的思维和我们有什么不同?分享给所有的朋友       You know how some things ar ...

  4. 怎样查看SSL证书的有效期?自动续期是否生效?

    前面一篇教程教大家如何能够把网站的 HTTPS 的 SSL 证书自动续期.料神米课的学员动手能力都很强,已经很多都成功把证书续期了.但怎么看证书续期是否成功了呢? 使用火狐 firefox 浏览器就可 ...

  5. ios中 radioButton和DataPIcker,九宫格封装好使用

    下载地址 http://pan.baidu.com/share/link?shareid=2894506499&uk=923776187 引用这几个文件 radiobutton.封装好单选按钮 ...

  6. CSRF攻击与防御(写得非常好)

    转自:http://blog.csdn.net/stpeace/article/details/53512283 CSRF概念:CSRF跨站点请求伪造(Cross—Site Request Forge ...

  7. Cordova笔记(一)

    跨平台的PhoneGap被Adobe收购,改名为Cordova,现在是Apache下的一款开源软件.网上能找到的关于PhoneGap的教程有些方法已不适用,在学习使用最新版的Cordova时有些问题需 ...

  8. java结合使用Jsonp的例子

    更多:js跨域问题解释 解决方案值使用jsonp或jQuery Jsonp和java操作例子 介绍JSONP之前,先简单的介绍一些JSON.JSON是JavaScript Object Notatio ...

  9. 用vs调试sql存储过程

    大家有没有给存储过程找错误的经历,一遍遍的去读sql代码,发现一个小错误可能都要用很长的时间,这次介绍用vs2010调试存储过程,用起来和在vs里调试代码一样,非常爽.           首先,打开 ...

  10. Git 基础(分布式版本控制系统)

    1.Git 简史 自诞生于 2005 年以来,Git 日臻成熟完善,在高度易用的同时,仍然保留着初期设定的目标.它的速度飞快,极其适合管理大项目,有着令人难以置信的非线性分支管理系统. 2.Git 基 ...