jQuery datatable setting column design and value i

Question

I have written a following code for my datatables which fills up the table with contents from my DB like this:

 if (datatable != null)
            datatable.destroy();

        datatable = $('#tableProducts').DataTable({
            "pageLength": 50,
            "bLengthChange": false,
            "processing": true,
            "serverSide": true,
            "filter": true,
            "orderMulti": false,
            "bSort": false,
            "ajax": {
                "url": "/Bulk/LoadData/",
                "type": "POST",
                "data": {
                    "username": $(".sellerInput").val(),
                    "drange": $(".select2").val()
                },
                success: function (data) {
                }
            },
            "columns": [
                      {
                          "targets": -1,
                          "data": "ImageURL",
                          "name": "Title",
                          "render": function (data, type, row) {
                              return '<td><img src=' + data + '></td>';
                          },
                          "autoWidth": true
                      },
                {
                    "data": "Sales",
                    "name": "QuantitySold",
                    "render": function (data, type, row) {

                        return '<td>' + data + '</td>'
                    },
                },
                 {
                     "data": "CurrentPrice",
                     "name": "CurrenctPrice",
                     "render": function (data, type, row) {

                         return '<td> <b>$ ' + data + '</b></td>'
                     },
                 }
            ]
        });

And this works just fine if I don't specify the success callback. If I specify the success callback like this ( also shown in code above):

"ajax": {
       "url": "/Bulk/LoadData/",
       "type": "POST",
       "data": {
                "username": $(".sellerInput").val(),
                "drange": $(".select2").val()
               },
                success: function (data) {
               // some custom code here and + filling up datatable with data from my DB...
               }
   },

The problem here is if I specify the success callback and then update other parts of my HTML page, then the datatable doesn't loads up the data in DB..

My question is, how can I manually specify the data source for datatable if I override the datatable's success callback function in order to update more parts of my HTML page insteade of just the datatable itself?

Can someone help me out ?

Answer 1

From the docs :

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc.

So simply use

ajax: {
   url: "/Bulk/LoadData/",
   type: "POST",
   data: {
     "username": $(".sellerInput").val(),
     "drange": $(".select2").val()
   },
   dataSrc: function (data) {
     // some custom code here and + filling up datatable with data from my DB...
     return data
   }
},

instead.

Answer 2

You can use dataSrc instead of success to get the response data

Try this:

"ajax": {
       "url": "/Bulk/LoadData/",
       "type": "POST",
       "data": function (d){
                d.username: $(".sellerInput").val(),
                d.drange: $(".select2").val()
       },
       "dataSrc": function (data) {
               // some custom code here and + filling up datatable with data from my DB...
            console.log(data);
            return data;
       }
   },

Note: Also you are trying to send extra param's as username and drange, so in DataTable we should use "data":function(d){ as function to send extra param

Official Documentation