jquery dataTables - 如何提取行数据onclick事件 [英] jquery dataTables - how to extract row data onclick event

问题描述

我试图熟悉jquery dataTable插件： 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或一个类

任何建议，将不胜感激。

解决方案

希望这是你寻找的东西

Html

 < table id =usersclass =displaywidth =100％cellspacing = 0 > 
< thead> 
< tr> 
< th id =pID> ID< / th> 
< th>名称< / th> 
代码< / th> 
< th>可用< / 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>名称< / th> 
代码< / th> 
< th>可用< / th> 
< / tr> 
< / tfoot> 
< / table> 
  

脚本

  $（document）.ready（function（）{
 var table = $（'＃users'）。DataTable（）; 
 $（'＃users （'click'，'tr'，function（）{
 console.log（table.row（this）.data（））; 
}）; 
} ）; 
  

Fiddle Link

I'm trying to familiarize myself with the jquery dataTables plug in: 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.

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/

$("#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

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

Any suggestions would be appreciated.

解决方案

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

这篇关于jquery dataTables - 如何提取行数据onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！