dataTable 行按钮单击答案

【问题标题】：dataTable row button clickdataTable 行按钮单击
【发布时间】：2013-11-21 09:50:53
【问题描述】：

我创建了一个数据表，其中有两列包含

这是我的数据表：

$(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>

感谢您的帮助。

【问题讨论】：

Possible duplicate 查看旧问题的解决方案。
@srvikram13 在重复链接中，答案使用 .live() 已从较新的 jquery 版本中删除
对不起！我没有费心检查 jQuery 版本。

标签： jquery datatable

【解决方案1】：

你应该委托事件：

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

【讨论】：

这是最好的解决方案
一个非常优雅的解决方案。这样，您也不必使用 dataTables 插件中的“initComplete”回调。非常感谢。

【解决方案2】：

这对我来说适用于较新版本的 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];
    });

【讨论】：

【解决方案3】：

试试这个

<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>

【讨论】：