2017-06-23 34 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