Question

我正在使用启用了响应选项的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

});

折叠表的图片：

有人可以帮忙吗？

提前致谢！

Answer 1

好吧，我正在寻找一个解决方案，我找不到任何解决这个问题的方法所以我做了这个：

$(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);
});

Answer 2

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

Answer 3

谢谢你上面的两个答案。我开发了服务器端的数据表。所以我将这两件事结合在一起。这是我对服务器端数据表的解决方案

$('#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;
    }

});

返回响应数据表中的行数据

3 个答案: