Question

我尝试动态绑定部分视图，但是对于jquery 我在第一行的数据表中指出它不起作用。

@model IEnumerable<PurModelClass>
    <table id="stock-audit-table" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                @*<th>Purchase From</th>
                <th>Purchase Date</th>*@
                <th>Item Name</th>
                <th>Qty</th>
                <th>Unit</th>
                <th>Cost</th>
                <th>Net Amount</th>
                <th>Discount</th>
                <th>Vat</th>
                <th>Gross</th>
            </tr>
        </thead>
        <tbody id="stock-audit-tbody">
        @foreach (var item in Model)
        {
            <tr><td colspan="8">Invoice No: @item.PurInvNo Inv Date: @($"{@item.PurDate:MMM-dd-yyyy}") Vendor: @item.VendorName </td></tr>
            foreach (var detail in item.PurDetails)
            {
                <tr>
                    <td>@detail.StockName</td>
                    <td>@detail.PurQty</td>
                    <td>@detail.UnitName</td>
                    <td>@detail.UnitPrice</td>
                    <td>@detail.Total</td>
                    <td>@detail.Discount</td>
                    <td>@detail.VAT</td>
                    <td>@detail.NetAmount</td>
                </tr>
            }


        }
        </tbody>
        <tfoot>
        </tfoot>
    </table>

这是数据表脚本，有没有办法通过要求具有colspan属性的特定行来实现jquery数据表。

<script type="text/javascript">
    $(document)
        .ready(function() {
            $('#stock-audit-table').DataTable({
                    "autoWidth": false,
                    "order": [[0, "desc"]]
                });
            }
        );
</script>

Answer 1

试试rowGroup extension。您可以使用startRender和endRender自定义摘要数据

$('#stock-audit-table').DataTable({
    "autoWidth": false,
    "order": [[0, "desc"]],
    "rowGroup": {
         dataSrc: 0,
         startRender: function(groupName){
             return $('<tr/>').append("<td colspan="8">TODO put data here</td>");
         }
    }
});

<tbody id="stock-audit-tbody">
@foreach (var item in Model)
{
    foreach (var detail in item.PurDetails)
    {
        <tr>
            <td>
                <!-- Define a key to be referenced by the 
                 'datasrc' property in dataTables -->
                @item.GroupName
            </td>
            <td>@detail.StockName</td>
            <td>@detail.PurQty</td>
            <td>@detail.UnitName</td>
            <td>@detail.UnitPrice</td>
            <td>@detail.Total</td>
            <td>@detail.Discount</td>
            <td>@detail.VAT</td>
            <td>@detail.NetAmount</td>
        </tr>
    }
}
</tbody>

Jquery数据表不能在colspan中的第一行工作

1 个答案: