Блог

Я создал Datatable динамически. Я столкнулся с проблемой при извлечении данных из DataTable. По сути, я хочу, чтобы мой вывод был таким, чтобы, если я щелкну любую строку в DataTable. Я хочу, чтобы были выбраны полные данные в этой строке и отображались данные этой строки на следующей странице.

Моя функция Java Script:

 <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 Script будет выглядеть следующим образом :

 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");
}
});
}
  

Пожалуйста, предложите мне один метод, чтобы я мог извлекать данные из этой строки и отображать их значения на следующей странице

Обычно у меня есть ссылка в последнем столбце определения 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);
});      

    }
  

Я надеюсь, что это поможет.