时间戳

首页 > 解决方案 > 使用动态创建的行输入和选择列表从 Datatable 列中检索数据

jquery - 使用动态创建的行输入和选择列表从 Datatable 列中检索数据

问题描述

我的html一个观点中有下表：

@using (Html.BeginForm("Add", "Item", FormMethod.Post, new { @class = "form-horizontal", id = "ItemForm", role = "form" }))
{
    <body>
        <h2>Invoice</h2>

        <table id="ItemTable" class="table table-hover table-secondary" style="width:100%">
            <thead>
                <tr>
                    <th></th>
                    <th>ItemType</th>
                    <th>Unit</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total</th>
                    <th></th>
                </tr>
            </thead>
        </table>

    </body>
}

这是我的 jQuery 数据表：

$(document).ready(function () {
    var table = $('#ItemTable').DataTable({
        "dom": '<"toolbar">frtip',
        "paging": true,
        "pagingType": "full_numbers",
        "searching": false,
        responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [{
            className: 'control',
            orderable: false,
            targets: 0
        }],
        order: [1, 'asc']
    });

    $("div.toolbar").html(
        '<button id="addRow" type="button" class="btn btn-outline-info fa fa-plus"> Add</button> <div class="divider"/>' +
        '<button id="SaveItemButton" type="submit" class="btn btn-outline-secondary fa fa-save"> Save</button> <div class="divider"/>' +
        '<button id="PreviewButton" type="button" class="btn btn-outline-info fa fa-eye"> Preview</button> <div class="divider"/>' +
        '<button id="PrintButton" type="button" class="btn btn-info fa fa-print"> Print</button> <div class="divider"/>' +
        '<button id="SendButton" type="button" class="btn btn-lump-sum fa fa-envelope"> Send</button> <div class="divider"/>' +
        '<button id="DeleteButton" type="button" class="btn btn-secondary fa fa-trash"> Delete </button> <div class="divider"/>'
    );

    var counter = 1;

    $('#addRow').on('click', function () {
        table.row.add([
            '',
            '<input class = "form-control" type="text">',

            '<select class="form-control defaultpicker">' +
                '<option value="select">dan</option>' + 
                '<option value="select">Komad</option>' +
                '<option value="select">Sat</option>' +
                '<option value="select">m</option>' +
                '<option value="select">m2</option>' +
                '<option value="select">m3</option>' +
                '<option value="select">kg</option>' +
                '<option value="select">lit</option>' +
                '<option value="select">pak</option>' +
                '<option value="select">reč</option>' +                               
            '</select > ',

            '<input class = "form-control" type="number">',
            '<input class = "form-control" type="text">',
            '<input class = "form-control" type="text" readonly>',
            '<button type="button" Id="DeleteButton" class="fa fa-times select-row btn btn-secondary btn-sm" data-id=""></button>',            
        ]).draw(false);

        counter++;
        $('#ItemTable').dataTable().fnPageChange('last');
    });

    $('#ItemTable').on("click", "#DeleteButton", function () {
        var table = $('#ItemTable').DataTable();
        var row;

        console.log($(this).closest('table'));
        if ($(this).closest('table').hasClass("collapsed")) {
            var child = $(this).parents("tr.child");
            row = $(child).prevAll(".parent");
        } else {
            row = $(this).parents('tr');
        }

        table.row(row).remove().draw();
    });

    // Automatically add a first row of data
    $('#addRow').click();


    $('#ItemForm').submit(function () {
        debugger;
        var sData = table.$('input').serialize();
        alert("The following data would have been submitted to the server: \n\n" + sData);
        return false;
    });
});

提交表单时，DataTable不会检索来自其中输入的数据。这部分返回var sData = table.$('input').serialize();空字符串。在这种情况下，如何从输入和选定列表中检索数据，以便将该数据提交到服务器。

标签： jqueryasp.net-mvcinputdatatableshttp-post

解决方案

推荐阅读