Updating a div via Ajax within a Datatable Ajax call-CodePudding

I would like to make a single Ajax call to update not only a datatable but a div that is located elsewhere in the page. I am using Ajax-datatable-rails gem. I buit the upper part of the ajax call such as:

$('#people-datatable').dataTable
    processing: true
    order: []
    serverSide: true
    ajax: data: (d) ->
      d.url = $('#people-datatable').data('source');
      success: ({ data }) ->
        people_ids = data.map (people) -> people.DT_RowId
        $("#bouba").html people_ids.join()
      return

Alternatively, i also tried the following with no success (data does not exist for the second Ajax call):

  $('#people-datatable').dataTable
    processing: true
    order: []
    serverSide: true
    ajax: data: (d) ->
      d.url = $('#people-datatable').data('source');
      d.recordsTotal = $.ajax({
        url: $('#people-datatable').data('source'),
        dataType: "json",
        type: 'GET',
        async: false,
        success: ({ data }) ->
          people_ids = data.map (people) -> people.DT_RowId
          $("#bouba").html people_ids.join()
          return
      });
      return

(I have remove the rest of the code that i related to the columns)

It does not look like the success triggers, as nothing happens after the data are loaded. What would be the right way please ?

CodePudding user response：

Try:

$('#people-datatable').dataTable
  processing: true
  order: []
  serverSide: true
  ajax: data: (d) ->
    d.url = $('#people-datatable').data('source');
    d.recordsTotal = $.ajax({
      url: $('#people-datatable').data('source'),
      dataType: "json",
      type: 'GET',
       async: false,
      success: ({ data }) ->
        people_ids = data.map (people) -> people.DT_RowId
        $("#bouba").html people_ids.join()
        return
    }).responseJSON.recordsTotal;
    return

Or try you can using the drawCallback option of the datatable. This option is called after each draw of the datatable. You can use it to update the #bouba dom. Here is an example:

$('#people-datatable').dataTable
  processing: true
  order: []
  serverSide: true
  drawCallback: ->
    people_ids = @api().rows().data().map (people) -> people.DT_RowId
    $("#bouba").html people_ids.join()
  ajax: data: (d) ->
    d.url = $('#people-datatable').data('source');
    return