在響應式數據表中返回行數據

我正在使用啓用了響應選項的jquery數據表。我無法返回行數據時，該表是在響應模式：在響應式數據表中返回行數據

我的表：

$('#productsTable').DataTable({ 
     responsive: true 
});

表有產品代碼，品牌，類別，價格一欄，「添加到購物車'按鈕。該按鈕應該檢索行數據。但是，當表處於響應模式（又名縮小，某些列已摺疊）時，單擊我的按鈕，它不會返回任何數據。

我的HTML表：

<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th>Product Code</th> 
     <th>Brand</th> 
     <th>Category</th> 
     <th>Price ($)</th> 
     <th></th> 
    </tr> 
</thead> 
<tbody> 
    {{#each context}} 
    <tr> 
     <td class="product_code">{{product_code}}</td> 
     <td class="brand">{{brand}}</td> 
     <td class="category">{{category}}</td> 
     <td class="price">{{invoice_price}}</td> 
     <td><button type="button" class="btn btn-primary">Add to Cart</button></td> 
    </tr> 
    {{/each}} 
</tbody> 
</table>

我添加到購物車事件：

$(".btn-primary").click(function(e) { 

    var price = $(this).parent().parent().children('td.price').text(); 

    var context = { 
     product_code: $(this).parent().parent().children('td.product_code').text(), 
     brand: $(this).parent().parent().children('td.brand').text(), 
     category: $(this).parent().parent().children('td.category').text(), 
     price: $(this).parent().parent().children('td.price').text(), 
    }; 

    console.log(context) //console.logs context 

});

摺疊的表的圖片：

有人能幫忙嗎？

提前致謝！

來源

2016-03-15 Trung Tran

Datatables.js將表數據存儲在內存中，您應該真正在那裏查找值，而不是在DOM中。保持數據操作邏輯與演示分離將導致更清晰的模塊化代碼。

您需要點擊行的數據。獲取該數據的一種方法是爲數據表API提供對<tr>元素的引用。

$(".btn-primary").click(function(e) { 
    var $tr = $(this).closest('tr'); 
    var rowData = $('#productsTable').DataTable().row($tr).data(); 
    console.log(rowData); 
});

來源

2016-03-15 04:36:30

嗨 - 我試過了，它完美的作品，如果表是在其全尺寸。但是，如果它崩潰了（我添加了上面的屏幕截圖），然後單擊我的按鈕，它不會返回任何數據... –

有道理，我認爲列被隱藏，未轉換爲子行。在這種情況下，請查看此鏈接https://datatables.net/extensions/responsive/examples/child-rows/index.html。在$（'＃productsTable'）.DataTable（）。row（$ tr）.child（）''上嘗試console.log。你將不得不解析html來找到你需要的數據。我不認爲數據表提供了方便的數據訪問子行。 –

嗯，我正在尋找一個解決方案，我沒有找到任何解決這個問題，所以我做了這個：

$(document).on('click', '.button', function() {//Button inside a cell 
    var current_row = $(this).parents('tr');//Get the current row 
    if (current_row.hasClass('child')) {//Check if the current row is a child row 
     current_row = current_row.prev();//If it is, then point to the row before it (its 'parent') 
    } 
    var data = products.row(current_row).data();//At this point, current_row refers to a valid row in the table, whether is a child row (collapsed by the DataTable's responsiveness) or a 'normal' row 
    console.log('Row data:'+data); 
});

來源

2016-07-21 22:53:40

謝謝！爲我工作 – Gabriel

感謝您對以上兩個答案。我開發了與服務器端數據表。所以我把這兩件事結合在一起。這是我的服務器端datatable的解決方案

$('#list_quoation tbody').on('click', 'button', function() { 

    var data = table.row($(this).parents('tr')).data(); 

    // This work when data table is responsive 
    if(data == undefined) { 

     var selected_row = $(this).parents('tr'); 
     if (selected_row.hasClass('child')) { 
      selected_row = selected_row.prev(); 
     } 

     var rowData = $('#list_quoation').DataTable().row(selected_row).data(); 

     window.location.href = "/preapplication/" + rowData.quot_id; 

    } else { 

     window.location.href = "/preapplication/" + data.quot_id; 
    } 

});

來源

2017-09-13 08:26:14 seyha

在響應式數據表中返回行數據

回答

相關問題