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

Question

I am using this reference . I have a Form when I submit my form It will add row in datatable with inputted data. but when I submitting button it showing [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] instead of data.

Here is my Html Code:

<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 Handling for accepting the request:

           $(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();
           });

Here is the image of error

Answer 1

Unless you define in column definitions to look for object properties for each column, the plugin expects an array of primitive values for each row by default.

Look at the columns definitions in the reference link in your question

Or try basic values array:

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