Fatal编程技术网
  • jquery/
  • Jquery 如何单击数据表上的任何行？

Jquery 如何单击数据表上的任何行？

jquery datatables

Jquery 如何单击数据表上的任何行？,jquery,datatables,Jquery,Datatables,我使用DataTables来显示一些数据 $( document ).ready(function() { var table = $('#tbl_user').DataTable( { "ajax": "data_user.php", "bPaginate":true, "bProcessing": true, "pageLength": 10, "columns": [ {

我使用DataTables来显示一些数据

$( document ).ready(function() {    
    var table = $('#tbl_user').DataTable( {
        "ajax": "data_user.php",
        "bPaginate":true,
        "bProcessing": true,
        "pageLength": 10,
        "columns": [
            { mData: 'username' } ,
            { mData: 'fullname' } ,
            { mData: 'email' },
            { mData: 'address' },
            { mData: 'phone' },
    ]
    }); 
});
它很好用。现在我想在每一行上添加click侦听器。假设单击了第2行，则会出现一个警报“您单击了第2行”。所以我加上这一部分：

$('#tbl_user').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
现在，如果单击任何一行，将显示一个警报：

您单击了undefined的行

为什么未定义？

您应该根据这组数据表将tbody添加到选择器中

$('#tbl_user tbody').on('click', 'tr', function () {
    // do what you want
});
更新

$('#tbl_user tbody').on('click', 'tr', function () {
    var data = table.row(this).data(); // Serialized data of row
    var firstColumnData = table.row(this).data()[0]; // The first column data
    var secondColumnData = table.row(this).data()[1]; // The second column data
    ...
});
@anta40，下面是尝试使用单击事件添加tbody的逻辑

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );
</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td></td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>


$（文档）.ready（函数（）{
变量表=$（“#示例”）.DataTable（）；
$（#示例tbody'）。在（'click'，'tr'，function（）{
var data=table.row（this.data（）；
警报（“您单击了“+数据[0]+”\'s行”）；
} );
} );
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
名称
位置
办公室
年龄
开始日期
薪水
让我知道逻辑是否适用于您？

接下来，我给出了一个工作示例

$（文档）.ready（函数（）{
变量表=$（“#示例”）.DataTable（）；
$（#示例tbody'）。在（'click'，'tr'，function（）{
警报（'您单击了行'+table.row（this.index（））；
log（'data:'+table.row（this.data（））；
} );
} );


名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$205,500
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$103,600
杰娜·盖恩斯
办公室经理
伦敦
30
2008/12/19
$90,560
奎因·弗林
支撑导线
爱丁堡
22
2013/03/03
$342,000
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$470,600
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$313,500
塔蒂亚娜·菲茨帕特里克
区域主任
伦敦
19
2010/03/17
$385,750
迈克尔·席尔瓦
营销设计师
伦敦
66
2012/11/27
$198,500
柏德
首席财务官（CFO）
纽约
64
2010/06/09
$725,000
格洛丽亚·利特尔
系统管理员
纽约
59
2009/04/10
$237,500
布拉德利·格里尔
软件工程