需要帮助在 ASP.NET Core Web 应用程序中显示 Price 列的总价值

Question

我有一个使用 Razor Pages 的

Index.cshtml

页面和一个用于检索数据的

Data.js

文件。现在我已经获得了数据，但现在我想显示总价格列。

Index.cshtml

中的标记和代码：

<div class="x_content">
    <table class="table table-hover" id="tblProduct">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Category</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
        <tr>
            <th>Sum:</th>
            <th></th>
        </tr>
    </tfoot>
    </table>
</div>

<script type="text/javascript">

    var js = jQuery.noConflict(true);

    js('#tblProduct').dataTable({
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(),
                data;

            var intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$a-zA-Z, ]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var cols = [1];

            for (let index = 0; index < cols.length; index++) {
                var col_data = cols[index];
                total = api
                    .column(col_data)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Update footer
                js(api.column(col_data).footer()).html(
                    total
                );
            }
        }
    });
</script>

代码加载自

Data.js

:

function BindProductsToGrid(products) {
    $('#tblProduct tbody').empty();

    var tr;
    $.each(products, function (index, product) {
        tr = $('<tr/>');
        tr.append(`<td>${(index + 1)}</td>`);
        tr.append(`<td>${product.name}</td>`);
        tr.append(`<td>${product.category}</td>`);
        tr.append(`<td>${product.price}</td>`);
        $('#tblProduct').append(tr);
    });
}

截图：

我使用 ASP.NET Core 6 Web 应用程序

谁知道，请帮帮我。谢谢。

Answer 1

根据您的代码，您使用了错误的列索引，这使得回调函数无法计算出正确的价格。

要解决问题并显示如图所示的总和，您可以参考以下代码：

首先修改tfoot添加第4个。

    <tfoot>
        <tr>
            <th>Sum:</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>

然后修改jquery计算右列。

<script>
    var js = jQuery.noConflict(true);

    js('#tblProduct').dataTable({
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(),
                data;

            var intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$a-zA-Z, ]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var col_data = 3; // Use the correct index for the "Price" column

            total = api
                .column(col_data)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Update footer for the "Price" column
            js(api.column(col_data).footer()).html(
                total 
            );
        }
    });

</script>

结果：