can not solve datatable error http://datatables.net/tn/4

elenora

I'm implementing asp.net core 3.1. I have a JQuery Datatable that its first column has checkboxes. and I want after user checks some of rows then a message shows the selected rows' information to the user and according to what user previously selected a button, it should change the status of those selected data and update the status of those data in DataTable. Now for updating those data, I get the following error: DataTables warning: table id=myDummyTable - Requested unknown parameter 'productRequestNo' for row 4, column 2. For more information about this error, please see http://datatables.net/tn/4

//Here is productrequestersController

        //----------------------------------------------------------------------
        [HttpPost]
        public JsonResult GetproductrequestersData()
        {

                var vwReportData = from t in _context.VwReport
                                   where t.IsDeleted == false
                                   select new
                                   {
                                       id1 = t.Id,
                                       id = t.Id,
                                       productRequestNo = t.productRequestNo,
                                       requesterName = t.requesterName,
                                       productName = t.productName,
                                       productRequestDate = t.productRequestDate,
                                       logDate = t.LogDate,
                                       itemName = t.itemName,
                                       lastReqStatus = t.LastReqStatus
                                   };
....
                //Returning Json Data  
        }

        public List<string> obtainingData(List<int> Id)
        {

            List<string> data = new List<string>();

            ShortproductrequesterJsonTO productrequesterJson = new ShortproductrequesterJsonTO();
         
            //Insert
            for (int i = 0; i < Id.Count - 1; i++)
            {
                var query = my query;

                foreach (var index in query)
                {     
                    productrequesterJson = new ShortproductrequesterJsonTO
                    {
                        id1 = index.id,
                        id = index.id,
                        productRequestNo = index.productRequestNo.GetValueOrDefault(),
                        requesterName = index.requesterName,
                        productName = index.productName,
                        productRequestDate = index.productRequestDate,
                        logDate = index.logDate,
                        itemName = index.itemName,
                        lastReqStatus = index.lastReqStatus

                    };
                    string jsonResult = JsonConvert.SerializeObject(productrequesterJson);
                    data.Add(jsonResult);
                  
                }
            }

            return data;
        }

        public IList<string> selectedListOperation(List<int> Id)
        {
           
            List<string> data = new List<string>();
            data = obtainingData(Id);

            int lastNumber = Id.LastOrDefault();


            switch (lastNumber)
            {
                case 1:
                    //technical review
                    runningOperationOnSelectedData(Id, 46);
                    break;
                case 2:
                    //confirmation
                    runningOperationOnSelectedData(Id, 47);
                    break;
            }

            return data;
        }

        public bool runningOperationOnSelectedData(List<int> Id, int status)
        {
                // Save changes in database
            return true;
        }


//-------------------------------------------------------------------
//Here is index.cshtml

<script>
    keepSelectedRows = [];
    var operationNumber = '';
    var oTable;
    var selectedIds = [];
    var descriptionText = "";

    var theRowObject='';
    var rowSelectedId='';


    jQuery(document).ready(function ($) {

           oTable= $('#myDummyTable').DataTable({

                "serverSide": true, // for process server side
    
            "ajax": {
                "url": "productrequesters/GetproductrequestersData",
                "type": "POST",
                "datatype": "json",
            },


                { "data": "id1" },   // this id is for checkbox
                { "data": "id", "name": "id", "autoWidth": true },
                { "data": "productRequestNo", "name": "productRequestNo", "autoWidth": true },
                { "data": "requesterName", "name": "requesterName", "autoWidth": true },
                { "data": "productName", "name": "productName", "autoWidth": true },
                { "data": "productRequestDate", "name": "productRequestDate", "autoWidth": true },
                { "data": "logDate", "name": "logDate", "autoWidth": true },
                { "data": "itemName", "name": "itemName", "autoWidth": true },
                { "data": "lastReqStatus", "name": "lastReqStatus", "autoWidth": true },
                {
                defaultContent: '<input type="button" class="Edit" value="edit"/>'
                },
            ]
    });

    jQuery(document).ready(function ($) {


            $('#grantAccess,#accessDenial).click(function () {

                var OTable = $("#myDummyTable").dataTable();

                $("input[type=checkbox]:checked", OTable.fnGetNodes()).each(function () {


                    var row = $(this).closest('tr');

                   var newRow = oTable.row(row);

                    console.log("newRow:"+newRow);
 
                    keepSelectedRows.push(newRow);
    
                    selectedIds.push($(this).closest("tr").find("td:eq(1)").text());

                    var Id = $(this).closest("tr").find("td:eq(1)").text();
          
                });

                if (this.id == 'technicalReview') {
               
                    selectedIds.push('001');
                }
                else if (this.id == 'confirmation') {
                    selectedIds.push('002');
                }
               
                $("input[name='hiddeninput']").val(selectedIds);

                    $('#showDataModal').modal('show');

            });

        $("#deletethem").click(function () {
            var OTable = $("#myDummyTable").DataTable();
            v
    $.ajax({
        url: "productrequesters/selectedListOperation",
        type: "POST",
        async: true,
        cache: false,                  /*descriptionText*/
        data: { "Id": selectedIds},
        success: function (data) {

            $.each(data, function (index, value) {

                OTable.row(keepSelectedRows.pop()).data(data).draw(false);

            });

        }
    });
  });
});

</script>

@*************************************@
<div class="my-5 col-sm-12 p-4">

    <table id="myDummyTable" class="table m-table mytable table-striped table-bordered mb-4" style="width: auto;">
        <thead>
            <tr id="headerrow">
                <th>
                    <input type='checkbox'>
                </th>
                <th hidden>
                    ID
                </th>
                <th>
                    request number
                </th>
                <th>
                    requester
                </th>
                <th>
                    product
                </th>
                <th>
                    request date
                </th>
                <th>
                    last change date
                </th>
                <th>
                    item
                </th>
                <th>
                    last status
                </th>
                <th>
                    operation
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<div class="row">
    <div class="col-12 d-flex justify-content-center" style="padding: 23px;">
        <input class="btn" id="technicalReview" type="button" value="technical review" data-whatever="technicalReview" style="margin: 0 0.5em;" />
        <input class="btn" id="confirmation" type="button" value="Confirmation" data-whatever="confirmation" style="margin-left: 0.5rem;" />
       
    </div>
</div>



@*******************************************************************************************@
<div class="modal fade" id="showDataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   
                <h4>Do you agree to change the status?</h4>
            </div>
            <form method="post">

                        <table id="classTable" class="table table-bordered" border="1">
                            
                            <tbody id="modalbody">
                            </tbody>

                        </table>

                    <button type="button" id="deletethem" class="btn btn-info" data-dismiss="modal">confirm</button>
            </form>
        </div>
    </div>
</div>

//------------------------------------------------------------
public class ShortproductrequesterJsonTO
    {
        public int id1 { get; set; }
        public int id { get; set; }
        public string productRequestDate { get; set; }
        public int productRequestNo { get; set; }
        public string productName { get; set; }
        public string requesterName { get; set; }
        public string itemName { get; set; }
        public string logDate { get; set; }
        public string lastReqStatus { get; set; }

    }

colin

The place to start would be to go through the debugging steps contained in the link you posted that's in the error message. Have you tried that? What did you find?

Colin

elenora

Yes I saw that link but I couldn't find the problem.

kthorngren

Does the problem happen when this code is executed?

    $.ajax({
        url: "productrequesters/selectedListOperation",
        type: "POST",
        async: true,
        cache: false,                  /*descriptionText*/
        data: { "Id": selectedIds},
        success: function (data) {
 
            $.each(data, function (index, value) {
 
                OTable.row(keepSelectedRows.pop()).data(data).draw(false);
 
            });
 
        }
    });

If so then it sounds like data doesn't match the structure of your Datatables column definition. Have you verified this?

Also you should remove draw() from the loop and execute it only once after the loop. It will make the loop more efficient. Like this:

        success: function (data) {
 
            $.each(data, function (index, value) {
 
                OTable.row(keepSelectedRows.pop()).data(data);
 
            });
            OTable.draw(false);
        }

Kevin

elenora

Thank you for your reply. You solved my issue and now my program works completely correct. But the message still is being shown to me!!!

kthorngren

But the message still is being shown to me!!!

Maybe something else is causing the error? Can you post a link to your page so we can take a look?

Look at the data being added to make sure it has a productRequestNo property. Or you can use columns.defaultContent to set a value if that property is missing.

Kevin