jquery dataTables - 如何提取行数据onclick事件

Question

我正在尝试熟悉jquery dataTables插件:http://www.datatables.net/manual/server-side#Sent-parameters

什么在起作用

我将json数据从服务器返回到我的客户端,并且正在填充表.

什么不起作用

当最终用户选择/单击行时,我需要能够捕获给定行中的数据.

这是我的代码:http://jsfiddle.net/e3nk137y/1515/

$("#users tr").click(function(){
  alert($(this).find("pID").val());
   });

上面的javascript是我一直在玩的东西.麻烦的是ajax调用是自动发生的,我不是在表中创建行的那个.最终,除了ID/pID之外,我还需要能够获取每一行中的一些字段

到目前为止我尝试过的

除了使用javascript代码,我也一直在审查这个:http://datatables.net/examples/api/select_single_row.html 但在该示例中,所有数据都是在客户端定义的,因此它很容易为每个表行指定一个id或一个类

任何建议,将不胜感激.

Answer 1

希望这是你想要的

HTML

<table id="users" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th id="pID">ID</th>
            <th>Name</th>
            <th>Code</th>
            <th>Available</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Code</th>
            <th>Available</th>
        </tr>
    </tfoot>
</table>

脚本

$(document).ready(function () {   
    var table = $('#users').DataTable();
    $('#users tbody').on('click', 'tr', function () {
        console.log(table.row(this).data());
    });
});

小提琴链接

Answer 2

你的小提琴中的错误：

• 您使用 datatables 方法调用，但仅添加了 bootstrap-table 库。
• Ajax 无法正常工作，但我们现在可以忽略它。
• 要将事件绑定到将由数据表插入的表行，请将其绑定到表并在方法中用作选择tr器。on()
• 如果您想通过 id 获取元素，find()则需要使用. 但请注意，如果有多个元素，则不能使用 ids，而应使用类。#
• 表格单元格没有值，因此请使用text()代替val()。

更新功能：

$("#users").on('click', 'tr', function () {
    alert($(this).find("#pID").text());
});

更新了小提琴