使用jQuery在DataTables表中創建動態鏈接

我試圖用DataTables創建一個JSON傳遞的表，並且在表中的某些鏈接被點擊時讓該表做「事情」。鏈接並不總是在那裏，所以他們需要動態生成。我剛剛開始使用jQuery，而且我很難弄清楚我會怎樣定義一個「附加」到正確元素的回調函數。使用jQuery在DataTables表中創建動態鏈接

下面是一個示例HTML頁面，其中包含一個動態生成的「up」鏈接（相當樸實的老JS）。這個想法是，點擊該鏈接將例如產生一個警報，顯示你點擊了哪一行，以及上面的行。最終目標是能夠使用鏈接/按鈕向上或向下移動行。

<?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head> 
       <title>Show a re-orderable list</title> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" /> 
       <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
     </head> 
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"> </script> 
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"> </script> 
    <script type="text/javascript" class="init"> 
     $(document).ready(function() { 
      var table = $('#example').DataTable({ 
       "ajax": "foo_data.txt", 
         "columnDefs": [ 
         { 
          "render": function (data, type, row) { 
           var extra_text = ""; 
           if(data === "Queued") { 
            extra_text = ' <a href="#" class="up_queue">Up</a> Down '; 
           } 
           return data +' ('+ row[3]+')' + extra_text; 
          }, 
          "targets": 1 
         }, 
         { "visible": false, "targets": [ 3 ] } 
         ] 
      }); 
      $(".up_queue").on('click', function() { 
       var mydata = table.row(this).data(); 
       var uprow = table.row(this).index() - 1; 
       var updata = table.row(uprow) .data(); 
       alert('You clicked on '+mydata[0]+ ' ' +updata[0] +' row'); 
       }); 
     }); 
    </script> 
<body> 

<div> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Job ID</th> 
       <th>Status</th> 
       <th>Name</th> 
       <th>Elapsed Time</th> 
       <th>Options</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

</body> 
</html>

本質的問題是「向上」鏈接什麼也不做......我想知道點擊了哪個行，該行立即clickee以上的指數。有任何想法嗎？

這裏的相關數據foo_data.txt可能通過AJAX送達：

{ 
"data": 
[["101","Finished","Static","3 days",""], 
["102","Queued","Moveable1","--",""], 
["103","Queued","Moveable2","--",""], 
["104","Queued","Moveable3","--",""], 
["105","Queued","Moveable4","--",""], 
["106","Queued","Moveable5","--",""], 
["107","Queued","Moveable6","--",""]]}

來源

2016-01-18 davis

的原因是，鏈接不起作用，是因爲它沒有對你附加的事件處理程序的時間存在。您需要使用委託事件處理程序。

$('#example').on('click', ".up_queue", function() { 
    var mydata = table.row(this).data(); 
    var uprow = table.row(this).index() - 1; 
    var updata = table.row(uprow) .data(); 
    alert('You clicked on '+mydata[0]+ ' ' +updata[0] +' row'); 
});

查看jQuery DataTables – Why click event handler does not work瞭解更多信息。

另一方面，考慮使用RowReorder擴展，該擴展提供更好的行重新排序功能。

來源

2016-01-18 14:02:11

是的，你的解決方案的工作（或者至少你的鏈接頁面來拉去的解決方案）：$（'＃（''click'，'.up-button'，function（）{var this =' ））; var tr_above = table.DataTable（）。row（tr）.index（） - 1; var data = table.DataTable（）。row（tr）.data（）; var data_above = table.DataTable （）.row（tr_above）.data（）; alert（'You點擊'+ data [0] +'互換'+ data_above [0]）; }）; – davis

@ Gyrocode.com發佈一個鏈接，幫助 - 這裏的工作代碼：

<?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head> 
       <title>Show a re-orderable list</title> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" /> 
       <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
     </head> 
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"> </script> 
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"> </script> 
    <script type="text/javascript" class="init"> 
     $(document).ready(function() { 
      var table = $('#example').DataTable({ 
       "ajax": "foo_data.txt", 
     'columnDefs': [ 
     { 
      'targets': 4, 
      'searchable': false, 
      'orderable': false, 
      "render": function (data, type, row) { 
       var extra_text = ""; 
       if(row[1] === "Queued") { 
        extra_text = ' <button type="button" class="button up-button">Up</button>' 
       } 
       return extra_text; 
      }, 
     } ] 
      }); 
      $('#example').on('click', ".up-button", function() { 
       var tr  = $(this.closest('tr')); 
       var table  = $(this.closest('table')); 
       var tr_above = table.DataTable().row(tr).index() - 1; 
       var data  = table.DataTable().row(tr).data(); 
       var data_above = table.DataTable().row(tr_above).data(); 

       alert('You clicked on ' + data[0] + ' swap with ' + data_above[0]); 
       }); 
     }); 

    </script> 
<body> 

<div> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Job ID</th> 
       <th>Status</th> 
       <th>Name</th> 
       <th>Elapsed Time</th> 
       <th>Options</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

</body> 
</html>

來源

2016-01-19 12:27:33 davis

使用jQuery在DataTables表中創建動態鏈接

回答

相關問題