在数据表中显示数据时请求的未知参数

Question

我正在使用此reference。提交表单时我有一个表单，它将在数据表中添加输入数据的行。但是当我提交按钮时，它显示的是 [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] ，而不是数据。

这是我的HTML代码：

<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Add Item For Requisition</h4>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Item</label>
                    </div>
                    <div class="col-md-8 input-sm">
                        <input ID="txtSrchItem" type="text" class="form-control" placeholder="Item Code"/>
                    </div>
                    <div class="col-md-2 input-sm">
                        <button id="btnItemSrch" class="btn btn-info pull-right">Search</button>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Item Name</label>
                    </div>
                    <div class="col-md-10 input-sm">
                        <select class="form-control input-sm" id="ItemName">
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Specification</label>
                    </div>
                    <div class="col-md-10 input-sm">
                        <input ID="txtItemSpecific" type="text"  class="form-control" placeholder="Item Specification"/>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Unit</label>
                    </div>
                    <div class="col-md-4 input-sm">
                        <input ID="txtUnit" type="text" class="form-control" placeholder="Unit"/>
                    </div>
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Qnty</label>
                    </div>
                    <div class="col-md-4 input-sm">
                        <input ID="txtQty"type="text" class="form-control" placeholder="Qty"/>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Rate</label>
                    </div>
                    <div class="col-md-4 input-sm">
                        <input ID="txtrate" type="text" class="form-control" placeholder="Rate"/>
                    </div>
                    <div class="col-md-2 input-sm">
                        <label class="pull-right">Amount</label>
                    </div>
                    <div class="col-md-4 input-sm">
                        <input ID="txtamt" type="text" class="form-control" placeholder="Amount"/>
                    </div>
                </div>
                <div class="form-group row">
                    <label ID="lblMsg" class="form-control"></label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="AddTable" class="btn btn-primary pull-left">Save changes</button>              
                <button type="button" class="btn btn-danger " data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div> 

用于接受请求的Ajax处理：

           $(document).ready(function () {
               var t = $('#example').DataTable();
               var counter = 1;

               $('#AddTable').on('click', function () {
                   var txtSrchItem = $('#txtSrchItem').val();
                   var ItemName = $('#ItemName').val();
                   var txtItemSpecific = $('#txtItemSpecific').val();
                   var txtUnit = $('#txtUnit').val();
                   var txtQty = $('#txtQty').val();
                   var txtrate = $('#txtrate').val();
                   var txtamt = $('#txtamt').val();

                   $.ajax({
                       data: {
                           'txtSrchItem' : txtSrchItem,
                           'ItemName' : ItemName,
                           'txtItemSpecific' : txtItemSpecific,
                           'txtUnit' : txtUnit,
                           'txtQty' : txtQty,
                           'txtrate' : txtrate,
                           'txtamt' : txtamt
                       },
                       success: function (data) {
                           t.row.add([
                                { 'data' : 'txtSrchItem' },
                                { 'data' : 'ItemName' },
                                { 'data' : 'txtItemSpecific' },
                                { 'data' : 'txtUnit' },
                                { 'data' : 'txtQty' },
                                { 'data' : 'txtrate' },
                                { 'data' : 'txtamt' }
                           ]).draw(false);

                       }
                   });

                   counter++;
               });

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

这是错误的图片

Answer 1

除非您在列定义中定义以查找每一列的对象属性，否则插件将默认情况下期望每行的原始值数组。

在您的问题的参考链接中查看columns的定义

或尝试使用基本值数组：

success : function(data){
     var rowData = [txtSrchItem, ItemName, ... , txtamt]; 
     t.row.add(rowData).draw(false);