dataTable行按钮点击

我创建了一个dataTable，其中我有两列包含< button value =“http：// .....”>。当我点击按钮时，它会打开一个“jquery对话框”。一切正常。问题是，当我的dataTable包含多行（超过五），当我点击按钮NEXT为dataTable看到下面的行，下面的行按钮不响应我的点击。只有显示的第一行按钮回答我的点击。该怎么办？dataTable行按钮点击

这里是我的dataTable：

$(document).ready(function() {gridGroup = $('#gridUser').dataTable({ 
    "bPaginate": true, 
    "bLengthChange": false, 
    "bSort": true, 
    "bFilter": true, 
    "bInfo": false, 
    "bRetrieve" : true, 
    "bAutoWidth": false, 
    "iDisplayLength": 5, 
    "bUrl": "",       
    "oLanguage": { 
     "sSearch": "<p>Recherche globale:<p> ", 
     "oPaginate": { 
      "sFirst": "Debut", 
     "sPrevious": "Prec", 
     "sNext":  "Suiv", 
     "sLast":  "Fin" 
    } 
    }, 
    "sDom": '<"H"Tfr>t<"F"ip>', 
    'oTableTools': { 
    "sSwfPath": "https://www.gmerp.local/app/project/common/public/js/tabletools/media/swf/copy_csv_xls_pdf.swf", 
    'aButtons': [ 
     { 
      "sExtends": "copy", 
      "sButtonText": "Copier", 
      "bShowAll": true, 
     }, 
     { 
      "sExtends": "print", 
      "sButtonText": "Imprimer", 
      "bShowAll": true, 
     }, 
     { 
      'sExtends': 'collection', 
     'sButtonText': 'Exporter', 
     'aButtons': [ 'csv', 'xls', 'pdf' ] 
     } 
    ] 
    }, 
    "bStateSave": false 
}); 

$('#gridUser tbody td button').click(function(){ 
    //todo 
}); 

});

和HTML部分：

<table cellpadding="0" cellspacing="0" border="1" id="gridUser"> 
<thead> 
    <tr> 
     <th>ID</th><th>EMAIL</th><th> </th><th> </th> 
    </tr> 
</thead> 
<tbody> 
    <tr align="left"><td>7</td><td>root</td><td><button value="https://localhost/user/session/edituser/7">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/7">Supprimer</button></td></tr> 
    <tr align="left"><td>26</td><td>wwwaa</td><td><button value="https://localhost/user/session/edituser/26">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/26">Supprimer</button></td></tr> 
    <tr align="left"><td>27</td><td>wwww</td><td><button value="https://localhost/user/session/edituser/27">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/27">Supprimer</button></td></tr> 
    <tr align="left"><td>30</td><td>soja</td><td><button value="https://localhost/user/session/edituser/30">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/30">Supprimer</button></td></tr> 
    <tr align="left"><td>31</td><td>ss</td><td><button value="https://localhost/user/session/edituser/31">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/31">Supprimer</button></td></tr> 
    <tr align="left"><td>32</td><td>sss</td><td><button value="https://localhost/user/session/edituser/32">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/32">Supprimer</button></td></tr> 
    <tr align="left"><td>33</td><td>ssss</td><td><button value="https://localhost/user/session/edituser/33">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/33">Supprimer</button></td></tr> 
    <tr align="left"><td>34</td><td>sssss</td><td><button value="https://localhost/user/session/edituser/34">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/34">Supprimer</button></td></tr> 
</tbody>    
<tfoot> 
    <tr>       
     <th>ID</th><th>EMAIL</th><th> </th><th> </th> 
    </tr> 
</tfoot>    
</table>

感谢你的帮助。

来源

2013-11-21 sajreborn

[可能的重复]（http://stackoverflow.com/questions/6646505/when-i-click-the-next-page-in-datatables-my-jquery-selectors-arent-working-anym）查看旧问题的解决方案。 –

@ srvikram13在重复的链接，答案使用.live（）已被删除从较新的jQuery版本 –

对不起！我没有麻烦检查jQuery版本。 –

您应该委托事件：

$('#gridUser tbody').on('click', 'td button', function(){ 
    //todo 
});

来源

2013-11-21 09:57:40

这是最好的解决方案 – sajreborn

非常优雅的解决方案。有了这个，你也不必使用dataTables插件的“initComplete”回调。非常感激。 – MrPixelDream

这个工作对我的DataTable的新版本（1.10.9）。我以前使用行点击事件，但改变了它的按钮，因为我不想排点击次数无意中触发事件处理函数

$table = $('table#summary').DataTable(); 

    $table.on('click', 'tr', function() { 
     var data = $table.row(this).data(); 
     var taskID = data[0]; 
    });

按钮单击例子

$table = $('table#summary').DataTable(); 

    $table.on('click', 'button.edit-task', function() { 
     var closestRow = $(this).closest('tr'); 
     var data = $table.row(closestRow).data(); 
     var taskID = data[0]; 
    });

来源

2015-09-09 09:15:19 Carlton

试试这个

<table id="MyTable" class="table table-bordered table-striped" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><button class="Mybtn">Click me</button></td> 
      <td>Hello</td> 
     </tr> 
    </tbody> 
</table> 

<script> 
    var Dtable; 
    $(document).ready(function() { 
     Dtable = $("#MyTable").DataTable(); 
    }); 


    $('#MyTable').on('click', '.Mybtn', function() { 

     var RowIndex = $(this).closest('tr'); 
     var data = Dtable.row(RowIndex).data(); 
     alert(data[1]); 
    }); 
</script>

来源

2017-11-19 11:10:24

dataTable行按钮点击

回答

相关问题