Problem with Sending Serialized Data via Ajax Post Request - Data table

hey_danish

Data Is sending accurately via other Ajax Call, But while sending the data via Datatable Post request, It is getting malformed. Below is the code that I'm using.

    "ajax": {
  "url":r_url,
  "type":r_type,
      "data": r_filters,
      "beforeSend": function(request) {
    request.setRequestHeader("X-CSRFToken", getCookie("csrftoken") );
  },
 "dataSrc":'data',
    },
"dom":"Bfrtip",
"bProcessing":true,
"bServerSide":true,
"bDestroy":true,
"columns":r_columns,
"aoColumnDefs": r_markups
  });

Trying to send this serialize data (f_cms=2&f_cms=1&f_=FALSE&f_daterange=2019-03-08%20-%202019-03-08&filter=true) but It is sending like (f,_,c,m,s,=,2, ...)
More details are here - https://stackoverflow.com/questions/55063246/serialize-form-data-in-datatable-jquery-ajax-post

Please help to sort this out.

kthorngren

You haven't posted much information to go on. I would suggest using console.log to output debugs at various places to see how your data is handled. In the SO thread you have this function:

$('#qc_list_filter').submit(function(e){
    e.preventDefault();
    var serializeData =$('#qc_list_filter').serialize()
    initializeDatatable( r_columns, serializeData );
  });

What does the function initializeDatatable do with serializeData?

Maybe you can post a link to your page or a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

hey_danish

   // Function to Initialize DataTable
   function initializeDatatable( r_columns, r_filters ) {
     var markups = [{
      "mRender": function( data, type, row ){     },"aTargets":[1] ,
     }], resp = createDataTable("#tbl_qc", r_columns, r_filters );
     resp.create( "/qc/list", "POST", markups );
     resp.action()
   }

//Generic Factory Function To Process DataTable
var createDataTable = function ( targetID, r_columns, r_filters ) {
  var response =  {
    targetID,
    r_columns,
    r_filters,
    update: function( obj, param, tableID, postUpdateAction ) {    },
    create: function( r_url, r_type, r_markups ){
      $(targetID).DataTable({
        "ajax": {
      "url":r_url,
      "type":r_type,
          "data": r_filters,
          "beforeSend": function(request) {
        request.setRequestHeader("X-CSRFToken", getCookie("csrftoken") );
      },
     "dataSrc":'data',
        },
    "dom":"Bfrtip",
    "bProcessing":true,
    "bServerSide":true,
    "bDestroy":true,
    "columns":r_columns,
    "aoColumnDefs": r_markups,
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
          var j = 0;
      for ( var i = 0; i < aData.length; i++ ) {
            var pkeyValue = aData[0], string="",
                className = r_columns[i][r_columns[i]["title"]][0],
                cType = r_columns[i][r_columns[i]["title"]][1],
                fieldId = r_columns[i][r_columns[i]["title"]][2]+"_"+pkeyValue;
        if( className.trim() == "editable" ) {
        if (cType == "checkbox") {
          string = response.inlineAppender( aData[i], cType, fieldId)
        } else {
                  string = "<span>"+aData[i]+"</span>"+" "+ response.inlineAppender( aData[i], cType, fieldId);
        }
            $('td:eq('+i+')', nRow).html( string ).addClass( className );
            }
      }
        }
      });
    },
    inlineAppender: function(td_value, cType, fieldId) {  },
    action: function() { },
  }
  return response;
};

hey_danish

I solved the problem,

Line No: 22, It works after I changed
"data": r_filters
to
"data": {"extra_data":r_filters}

Wrapped in JSON Data.