Question

我已经动态创建了一个数据表。我在从DataTable检索数据时遇到问题。基本上我希望我的输出以这样的方式，如果我单击dataTable上的任何行。我希望选中该行中的数据并在下一页显示该行的数据。

我的Java脚本功能：

<div id="div3">
<table id="tbl" class="dis" style="font-size: 12px; height: 50px;"
width="100%">
<tbody>
<tr id="t1">
<th></th>
<th>Id</th>
<th>Name</th>
<th>Type</th>
<th>Attrib. Set Name</th>
<th>SKU</th>
<th>Price</th>

<th>Qty</th>
<th>Visibility</th>
<th>Status</th>
<th>Websites</th>
<th>Action</th>
</tr>
</tbody>
</table>
</div>

DataTable结束

我的Java脚本功能将如下：

function manageProducts() {
    $.ajax({
    url : "json/managePro.json",
    dataType : "json", 
    type : "post", 
    success : function(data) 
    {
    var len = data.data.length; // to find length
    var str = "";
    for ( var i = 0; i < len; i++) {
    // To Display The values in Datatable
    str += "<tr align = center>" + 
    "<td>" + 
    "<input type="+ data.data[i].check + ">" + 
    "</td>" + 
    "<td>"+ data.data[i].id + "</td>" + "<td>"
    + data.data[i].name + "</td>" + "<td>"
    + data.data[i].type + "</td>" + "<td>"
    + data.data[i].attribute + "</td>" + "<td>"
    + data.data[i].sku + "</td>" + "<td>"
    + data.data[i].price + "</td>" + "<td>"
    + data.data[i].quantity + "</td>" + "<td>"
    + data.data[i].visibility + "</td>" + "<td>"
    + data.data[i].status + "</td>" + "<td>"
    + data.data[i].websites + "</td>" + "<td>"
    + "<A href='new_product.jsp'>" + data.data[i].action
    + "</A>" + "</td>" + "</tr>";
    }
    $(str).appendTo('#tbl');

    $("#tbl").dataTable({
    "iDisplayLength" : 50,
    "bAutoWidth" : true,
    "sDom" : '<"top"l>rt<"bottom"ip><"clear">',
    "bSortCellsTop" : true

}).columnFilter(
{
: "head:after",
aoColumns : [
{type : "select",values : [ "yes", "No", "Any" ]},
{type : "number-range"},
{type : "text"},
{type : "select",values : [ "Simple", "Grouped"]},
{type : "select",values : ["Electronics", "Jewellery"]},
{type : "text"},
{type : "number-range"},
{type : "number-range"},
{type : "select",values : [ "Catalog", "Search"]}, 
{type : "select",values : [ "enabled", "disabled" ]}, 
{type : "select",values : [ "Main Website" ]}, 
]
});
},
error : function(data) 
{
alert("error");
}
});
}

请建议我一种方法，以便我能够从该行检索数据并在下一页显示其值

Answer 1

我通常在aoColumns定义的最后一列中有一个链接，我这样定义自己：

  { "stitle": "F", "sWidth": "15px", "aTargets": [5],
    "sDefaultContent": '<a href="#" class="editor_edit">Edit</a>' }

然后我就这样抓住了这个事件：

"fnDrawCallback": function( oSettings ) {
   oTable.$('a.editor_edit').click( function(event) {
   event.preventDefault();
   var myTD = this.parentNode;
   var myRow = myTD.parentNode;
   var myID = oTable.fnGetData( myRow )[0];
   var myDataItem1 = oTable.fnGetData( myRow )[1];
   console.log('Picked: Edit '+myDataItem1);
});      

    }

我希望有所帮助。

从DataTable中的行检索数据

1 个答案: