jquery datatables column render: Multiple Ajax Calls

Question

The following code is in my ColumnDefs part of the DataTables table's initialization. In the FireBug, I am noticing that the call to my ColdFusion CFC is being made twice per column--which is inefficient. Please note the following code is based on: Data table column rendering with ajax response .

Update 1 Here is most of the code--note, not all columns and their Rendering is present in this code. https://docs.google.com/document/d/1t9vERsngpporbrU-FbE9esjt-KHL0qjLK076qkldGZ8/edit?usp=sharing

{
    "targets": 11, /* Date Created */
     "render": function (data, type, row, meta) { 
      var currentCell = $("#table_main_admin").DataTable().cells({"row":meta.row, "column":meta.col}).nodes(0);
           $.ajax({ 
            url: 'date_conversions.cfc',  
            dataType: 'json',
            data: {method: 'format_date_via_coldfusion', date_input: data}, 
            }).done(function (success) { $(currentCell).html(success.mydate); });
            return null;
          }  
}

So what is your question?

ProEvilz
– ProEvilz

2018-01-04 16:44:27 +00:00
Commented Jan 4, 2018 at 16:44 — ProEvilz
– ProEvilz, Commented Jan 4, 2018 at 16:44
Why are duplicate calls being made?

IrfanClemson
– IrfanClemson

2018-01-04 16:51:53 +00:00
Commented Jan 4, 2018 at 16:51 — IrfanClemson
– IrfanClemson, Commented Jan 4, 2018 at 16:51

davidkonrad · Accepted Answer · 2018-01-04 18:55:21Z

4

Why are duplicate calls being made?

Because the render callback is called for all request types - that is display, filter, sort and type. In your case it is called initially twice per row

one time for display, i.e retrieving the data
a second time for filter since you have a order on the columns, at least the default order

Obviously anything than the first AJAX request is redundant. Normally you can avoid consecutively requests simply by testing on the type, but you have a setup with AJAX where values should be injected delayed.

The solution you have above by inserting success.mydate via DOM is actually the worse part: It will never work since any value is forgotten on next draw. And you cannot simply return success.mydate either (classic async problem)

I will suggest you maintain a list of processed (ajaxed) values in meta.settings.aoColumns[] (so you can have multiple columns with that setup in the same table).

As mentioned in the first answer, check if type is of kind display; this is the very first request and the only one you want / need to process.
Then check if you already have processed the column for the row, if not do the ajax stuff and in done() update both the processed value and the cell through the API!
Meanwhile return a dummy string or perhaps the initial value of data.
In all other cases, return the processed value from meta.settings.aoColumns[]

I cannot replicate your setup above accurately, but here is the scheme :

render: function(data, type, row, meta) {
  if (!meta.settings.aoColumns[meta.col]._processed) {
    meta.settings.aoColumns[meta.col]._processed = []
  }  
  var processed = meta.settings.aoColumns[meta.col]._processed 
  if (type == 'display') {
    if (!processed[meta.row]) {
      processed[meta.row] = 'waiting ...' + meta.row

      $.ajax({
        url : 'https://api.myjson.com/bins/avxod'
      }).done(function(success) {
        var fakeVal = 'Ok, done '+meta.row //success.mydate
        processed[meta.row] = fakeVal

        //update through the API 
        $('#example')
          .DataTable()
          .cell({ row: meta.row, column: meta.col })
          .data( fakeVal )
          .invalidate()

      })
      return processed[meta.row]
    } else {
      return processed[meta.row]
    }
  } else {
    return processed[meta.row]
  }   
}

I believe it is pretty fail proof. Here is a demo -> http://jsfiddle.net/0bsbw6gt/

edited Jan 4, 2018 at 18:55

answered Jan 4, 2018 at 17:11

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

IrfanClemson Over a year ago

I think you may be onto something but now the column doesn't even display any data--and it should. thx

IrfanClemson Over a year ago

Still no luck. Some of my 'data' variables can be empty and they generate ColdFusion error trying to convert to date but still [ if (data.length > 5 && type == 'display') {] causes multiple calls. Thanks.

IrfanClemson Over a year ago

Thanks. Kind of toying in the dark here.

davidkonrad Over a year ago

@Meengla, OK, see the update. Hope you can adapt it. You can delete comments.

davidkonrad Over a year ago

"...have 3 Date columns using Ajax" thats why the processed status need to be stored in the settings column object itself (alternatively in a external dictionary of arrays) I do not think it is particular "long"; you will need to return values in any case, also while ajaxing; you will need to have a "clever" way to keep track of the processing status and do a delayed insertion of the ajaxed values to DataTables internals the right way.

|

Collectives™ on Stack Overflow

jquery datatables column render: Multiple Ajax Calls

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related