Question

我有以下Jade模板，当我点击每行上呈现的按钮时，我正尝试触发javascript。我是DataTables和Jade的新手，所以即使我遵循文档，我也不确定我做错了什么。我认为这是由于我引用DataTable中的数据的方式。

html
    head
        title= 'Feed List'
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet")
        link(href="//cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css", rel="stylesheet")

body
    div.container.jumbotron
        h1.header NSE Announcements in last 30 Days
        h3.header Top Annoucements by corporates listed on NSE
    div.container
        script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')
        script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')
        script(src='//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js')
        script(src='//cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js')
        div#dataToShow
            table#resultTable.table.table-hover
                thead
                    tr
                        th='Ticker'
                        th='Link'
                        th='Date'
                        th='Description'
                        th='Click'
                    tbody
                        for feed in feedList
                            tr
                                td= feed.ticker
                                td
                                    a(href=feed.attachmentLink) #{feed.ticker}
                                td= moment(feed.dateAdded).format('DD-MM-YYYY h:mm:ss a')
                                td= feed.purposeText
                                td
script.     
    $(document).ready(function() {
        $('#resultTable').DataTable({
            "order": [[ 3, "desc" ]],
            "columnDefs" : [{"targets":3, "type":"date"},
                    {"targets":-1,"data": null,"defaultContent": "<button>Click!</button>"}]
            });
        $('#resultTable tbody').on( 'click', 'button', function () {
            var data = table.row( $(this).parents('tr') ).data();
            alert( "Ticker is " + data[1]);
            });
    });

如果我删除

var data = table.row( $(this).parents('tr') ).data();

它会触发警报窗口，因此我知道java脚本正在运行。我似乎无法想到为什么在我看来数据没有从数据表对象中获取。

Answer 1

您尚未将数据表输出分配给任何变量，请更改为

var table =  $('#resultTable').DataTable({
            "order": [[ 3, "desc" ]],
            "columnDefs" : [{"targets":3, "type":"date"},
                    {"targets":-1,"data": null,"defaultContent": "<button>Click!</button>"}]
            });

Source

数据表行按钮在玉模板中不起作用

1 个答案: