2017-06-23 76 views
0

我有以下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脚本工作。在我看来,我似乎无法想象为什么数据不会从数据表对象中获取。

回答

1

你还没有指定的DataTable输出到任何变量,改变

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

Source

+0

如果它的工作,请接受并给予好评的答案 – Rahul