DataTable的初始化与事件注册

     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事件,所以不得不为第一次初始化完成绑定了一次。

 

posted @   _朝晖  阅读(2413)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
历史上的今天:
2017-10-28 Angular学习笔记
2017-10-28 javaWeb安全漏洞修复总结
点击右上角即可分享
微信分享提示
主题色彩