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

jquery dataTables - how to extract row data onclick event

提问by dot

I'm trying to familiarize myself with the jquery dataTables plug in: http://www.datatables.net/manual/server-side#Sent-parameters

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

What's Working

什么在起作用

I have json data being returned from the server to my client and the table is being populated.

我有 json 数据从服务器返回到我的客户端，并且正在填充表。

What's Not working

什么不起作用

I need to be able to capture the data in a given row, when the row is selected / clicked on by the end user.

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

Here's my code: http://jsfiddle.net/e3nk137y/1515/

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

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

The above javascript is what I've been playing around with. Trouble is that the ajax call happens automagically and I'm not the one creating the rows in the table. Ultimately, I need to be able to grab some of the fields in each row, in addition to the ID / pID

上面的javascript是我一直在玩的。问题是 ajax 调用是自动发生的，我不是在表中创建行的人。最终，除了 ID / pID 之外，我还需要能够获取每行中的一些字段

What I've tried so far

到目前为止我尝试过的

Besides the playing with the javascript code, I've also been reviewing this: http://datatables.net/examples/api/select_single_row.htmlBut in that example, all the data is defined client side, so it makes it easy to specify either an id or a class for each table row

除了玩 javascript 代码，我也一直在这个：http: //datatables.net/examples/api/select_single_row.html但是在那个例子中，所有的数据都是在客户端定义的，所以它很容易为每个表行指定一个 id 或一个类

Any suggestions would be appreciated.

任何建议，将不胜感激。

回答by Aru

Hope this is what you r looking for

希望这是你正在寻找的

Html

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>

Script

脚本

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

Fiddle Link

小提琴链接

回答by Raidri supports Monica

Errors in your fiddle:

小提琴中的错误：

• You use datatables method call but have only added the bootstrap-table library.
• Ajax is not working in the fiddle, but we can ignore that for now.
• To bind the event also for table rows which will be inserted by datatables, bind it to the table and use tras selectorin the on()method.
• If you want to find()an element by idyou need to use the #. But beware that you can't use ids if there are multiple elements, use a classinstead.
• Table cells have no value, so use text()instead of val().

• 您使用 datatables 方法调用，但只添加了引导表库。
• Ajax 并没有发挥作用，但我们现在可以忽略它。
• 要将事件也绑定到将由数据表插入的表行，请将其绑定到表并在方法中tr用作选择器on()。
• 如果你想find()一个由id元素，你需要使用#。但请注意，如果有多个元素，则不能使用 id，请改用类。
• 表格单元格没有价值，因此请使用text()代替val()。

Updated function:

更新功能：

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

Updated fiddle

更新的小提琴