JQuery DataTable单元格从一行单击 [英] JQuery DataTable Cell from a row click

问题描述

我正在尝试在jquery datatable上实现一个函数，它返回一个单击行的第1列和第4列

我正在跟随这个例子，这允许我操纵点击行
http://datatables.net/examples/api/select_single_row认为我可以改变这个处理程序来执行读取单元格值的过程，并使用我自己的逻辑上的值

$ b $

  / *添加一个点击处理程序到行 - 这可以用作回调* / 
 $（＃example tbody）。 （function（event）{
 $（oTable.fnSettings（）。aoData）.each（function（）{
 $（this.nTr）.removeClass（'row_selected'）; 
} ）; 
 $（event.target.parentNode）.addClass（'row_selected'）; 
}）; 
  

我也从dataTable论坛中回过来了这个小代码段 http://datatables.net/forums/comments.php?DiscussionID=1384&page=1# item_0

  $（'＃example tbody tr'）。click（function（）{
 / /在第一个TD 
 alert（$（'td：eq（0）span'，this）.html（））; 
}）中提醒SPAN中元素的内容; 
  

我可以有任何指针，以便我可以获得点击的字段的第1列和第4列？ p>

下一部分
我已经解决了上述问题，谢谢nick

我有下一个问题的部分。当我启动表
i使用

  / *初始化表* / 
 oTable = $（' #filetable'）dataTable（{
bProcessing：true，
bServerSide：true，
sAjaxSource：/crvWeb/jsonFileList.do，
 fnServerData：function（sSource，aoData，fnCallback）{
 $ .ajax（{
dataType：'json'，
type：POST，
 url：sSource，
data：aoData，
success：fnCallback 
}）; 
} 
}）; 
  

我的servlet接受一个dir请求参数，并将列表作为json响应返回给datatable。

  /crvWeb/jsonFileList.do 
  

我如何添加和获取serlvet响应与发布请求，所以我可以更新我的表？

解决方案

您可以使用 .delegate（）

  $（＃example tbody）。delegate（tr，click function（）{
 var firstCellText = $（td：first，this）.text（）; 
 var fourthCellText = $（td：eq（3），this）.text ; 
}）; 
  

你可以在这里尝试演示

使用 .delegate（） 这个是指< tr> 因为这是我们正在处理的点击，使事情变得更加清洁，而在$ code>< tbody> 中仍然只有一个事件处理程序级别，而不是每个< tr> 。

I am trying to implement a function on jquery datatable, that returns the 1st and the 4th column of a clicked row

i am following this example, which allows me to manipulate a clicked row http://datatables.net/examples/api/select_single_row.html

thinking that i can change this handler to do the read cell value procedures and use the value on my own logic

/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) {
    $(oTable.fnSettings().aoData).each(function (){
        $(this.nTr).removeClass('row_selected');
    });
    $(event.target.parentNode).addClass('row_selected');
});

i have also come over with this little code segment from dataTable forum http://datatables.net/forums/comments.php?DiscussionID=1384&page=1#Item_0

$('#example tbody tr').click( function () {
    // Alert the contents of an element in a SPAN in the first TD
    alert( $('td:eq(0) span', this).html() );
} );

may i have any pointer so i can get the 1st and 4th column of the clicked field?

next part I have the above solved, thanks nick

however i have the next part of the problem. when i init the table i use

/* Init the table */
    oTable = $('#filetable').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "/crvWeb/jsonFileList.do",
        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.ajax( {
                "dataType": 'json', 
                "type": "POST", 
                "url": sSource, 
                "data": aoData, 
                "success": fnCallback
            } );
        }
    } );

my servlet takes a dir request parameter and returns a listing to the datatable as json response.

/crvWeb/jsonFileList.do

how can i add and get serlvet response with post request so i can have my table updated?

解决方案

You can use .delegate() easiest here, like this:

$("#example tbody").delegate("tr", "click", function() {
  var firstCellText = $("td:first", this).text();
  var fourthCellText = $("td:eq(3)", this).text();
});

You can try out a demo here

With .delegate() this refers to the <tr> since that's the click we're handling, making things quite a bit cleaner..and it's still only one event handler at the <tbody> level, not one per <tr>.

这篇关于JQuery DataTable单元格从一行单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！