如何在数据表行中显示模式弹出输入数据

时间:2019-05-08 11:37:54

标签: javascript jquery asp.net-mvc-4 datatables

我在数据表中是新手。
我使用jquery数据表将数据表加载到ajax调用上。
在表上,行单击打开的一个弹出窗口并在输入控件中询问值,该弹出窗口中输入的值将显示在我选择的行中。
表现不佳。
我该怎么做呢。? 有人可以帮我吗 这是我的桌子 Tableimage 这是我的jQuery

       $(document).ready(function () {
        $.fn.ABC = function () {
            var selectedValue = $("#SCODE option:selected").val();
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetPendingGrnDetail", "Purchase")',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ 'scode': selectedValue }),
                success: function (Orderlist) {
                    if (Object.keys(Orderlist).length > 0) {
                        $('#tblbody').empty();
                        $('#example').DataTable().destroy();
                        BindData(Orderlist);
                    }
                    else {
                        $('#tblbody').empty();
                        var text = "No Data found.";
                        $('#tblbody').append(
                            '<tr class="odd"><td valign="top" colspan="14" class="dataTables_empty">'
                            + text + '</td></tr>');
                    }
                },
                error: function () { alert('Error. Please try again.'); }
            });
        };
        var BindData = function (response) {
            var table = $('#example').DataTable({
                data: response,
                responsive: false,
                "pagingType": "full_numbers",
                "lengthMenu": [
                  [10, 25, 50, -1],
                  [10, 25, 50, "All"]
                ],
                columns: [
                     { 'data': 'PONO' },
                     { 'data': 'POLI' },
                     { 'data': 'ITEMCODE' },
                     { 'data': 'DESCRIPTION' },
                     { 'data': 'Unit' },
                     { 'data': 'POQty' },
                     { 'data': 'InQty' },
                     { 'data': 'Pending' },
                     { 'data': 'AcceptQty' },
                     { 'data': 'RejectQty' },
                     { 'data': 'Remarks' },
                ],
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel', 'pdf'
                ]
            });

            var acceptqty;
            var rejectqty;
            var remarks;
            $('#example').on('click', 'tr', function () {
                var name = $('td', this).eq().text();
                console.log(table.row(this).data());
                $("#pono").text(table.row(this).data()['PONO']);
                $("#poli").text(table.row(this).data()['POLI']);
                $("#desc").text(table.row(this).data()['DESCRIPTION']);
                $("#itemcode").text(table.row(this).data()['ITEMCODE']);
                $("#poqty").text(table.row(this).data()['POQty']);
                $("#pending").text(table.row(this).data()['Pending']);
                $("#unit").text(table.row(this).data()['Unit']);

                acceptqty = $('td', this).eq(9).text();;
                rejectqty = $(this).closest('td').find(":text:eq(10)");
                remarks = $('td', this).eq(11).text();;
                console.log("hgSDFksZTGFjgjzdh-------", remarks);
                $("#AcceptQty").val($(acceptqty).val());
                $("#RejectQty").val($(rejectqty).val());
                $("#REMARKS").val($(remarks).val());
                $('#DescModal').modal("show");
            });
            $('#modalsave').click(function () {
                var dt = $("#AcceptQty").val();
                alert(dt);
                acceptqty = $("#AcceptQty").val();
                rejectqty = $("#RejectQty").val();
                remarks = $("#REMARKS").val();
                $("#myModal").modal("hide");
            });
        }
        $("#SCODE").on("change", function () {
            $('#tblbody').empty();
            $('#example').DataTable().destroy();
            $.fn.ABC();
        });
    });

她是我的模式弹出窗口 enter image description here

请引导我。

0 个答案:

没有答案