I am using the jquery datatable with the responsive option turned on. I am having trouble returning row data when the table is in responsive mode:
My table:
$('#productsTable').DataTable({
responsive: true
});
The table has a column for product code, brand, category, price, and an 'add to cart' button. The button is supposed to retrieve the row data. However, when the table is in responsive mode (aka it's shrunk and some of the columns have collapsed) and i click my button, it does not return any data.
My html table:
<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>
My add to cart event:
$(".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
});
Image of collapsed table:
Can someone help?
Thanks in advance!
Well, i was searching a solution for this and I didn't find anything that solve this problem so i made this:
$(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);
});
Datatables.js stores the table data in memory, you should really look for the values there, instead of in the DOM. Keeping data manipulation logic separate from presentation will lead to cleaner, modular code.
You need the data of the clicked row. One way to get that data is to provide the datatables API a reference to the <tr>
element.
$(".btn-primary").click(function(e) {
var $tr = $(this).closest('tr');
var rowData = $('#productsTable').DataTable().row($tr).data();
console.log(rowData);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With