Update table with new data from Ajax Call using Button

Update table with new data from Ajax Call using Button

arutkovskiiarutkovskii Posts: 1Questions: 1Answers: 0

Below you can find my HTML and Javascript.
I cannot provide a test case because I am serving data from my local database.

What is happening in the code leading up to the issue:

I am initializing the table with all the entries in the database. Above the table, I have a "Fresh" button that makes an Ajax call to the Python Server, filters the values, and returns entries from 3 days ago.

Where everything breaks down:

When I make an Ajax call to the server, I receive entries, but the button does not update the entries in the table. (Look at the buttons: [...])

Can someone modify my code to update the DataTable with fresh upon pressing the button?
I would happy if you would have any clarifying questions. I am backend person, and I have very limited knowledge in JS, Html, and Datatables

Thank you in an advance

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
        <th> </th>
        <th>Media Outlet</th>

{% endblock %}

{% block scripts %}
    /* Formatting function for row details - modify as you need */
function format ( d ) {
    // show nothing if there is no name
    if (!(d.Name)) {d.Name = ''}
    // `d` is the original data object for the row
    return '<table class="table">'+
    $(document).ready(function () {
      var table = $('#data').DataTable({
        ajax: '/api/serveHaros',
        serverSide: true,
        columns: [
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
          {data: 'Summary', orderable: false},
          {data: 'MediaOutlet'},
          {data: 'Category'},
          {data: 'Date'}

        // button calls for the "fresh" data from in the /api/serveHaros
        // but this call does not update the "table"
        dom: 'Bfrtip',
        buttons: [
                text: 'Fresh',
                action: function ( ) {
                      url: '/api/serveHaros',
                      type: 'GET',
                      dataType: "json",
                      data : {"fresh": "fresh"}

    // Add event listener for opening and closing details
    $('#data tbody').on('click', 'tr td.details-control', function () {
        var table = $('#data').DataTable();
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            tr.removeClass( 'details' );
        else {
            // Open this row
            tr.addClass( 'details' );
            row.child( format(row.data()) ).show();
    } );

{% endblock %}

Sign In or Register to comment.