jQuery 数据表行按钮单击

dataTable row button click

提问by sajreborn

I create a dataTable in which I have two column containing < button value="http://.....">. When I click the button, it opens a "jquery dialog". everything works. The problem is that when my dataTable contains several lines (more than five), when I click on the button NEXT for the dataTable to see the following lines, the following lines BUTTON do not respond to my click. Only the front lines button displayed answer my click. What to do?

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

Here is my 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
});

});

and the HTML part:

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

thank you for your help.

感谢您的帮助。

回答by A. Wolff

You should delegate event:

您应该委托事件：

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

回答by Carlton

This worked for me with a newer version of DataTable (1.10.9). I was previously using a row click event but changed it to the button as I didn't want row clicks to unintentionally trigger the event handler function

这对我使用较新版本的 DataTable (1.10.9) 有效。我以前使用的是行单击事件，但将其更改为按钮，因为我不希望行单击无意中触发事件处理函数

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

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

Button click example

按钮点击示例

    $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];
    });

回答by Udara Kasun

Try This one

试试这个

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