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

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.html But 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或class

Any suggestions would be appreciated.

任何建议,将不胜感激。

2 个解决方案

#1

Hope this is what you r looking for

希望这是你想要的

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

#2

Errors in your fiddle:

小提琴中的错误:

You use datatables method call but have only added the bootstrap-table library.

您使用datatables方法调用但只添加了bootstrap-table库。

Ajax is not working in the fiddle, but we can ignore that for now.

Ajax并不适用于小提琴,但我们现在可以忽略它。

To bind the event also for table rows which will be inserted by datatables, bind it to the table and use tr as selector in the on() method.

要为将由datatables插入的表行绑定事件,将其绑定到表并在on()方法中使用tr作为选择器。

If you want to find() an element by id you need to use the #. But beware that you can't use ids if there are multiple elements, use a class instead.

如果你想通过id查找()元素,你需要使用#。但要注意,如果有多个元素,则不能使用id,而是使用类。

Table cells have no value, so use text() instead of val().

表格单元格没有值,因此请使用text()而不是val()。

Updated function:

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

Updated fiddle

#1