This topic contains 4 replies, has 2 voices, and was last updated by Jai Jai 8 months, 1 week ago.

mDatatable how repopulate data for existing multiple datatable on the same page


  • jax824
    Participant

    Posts: 20
    Member Reply #14955

    Hello :). I am try to reset data for existing multiple datatable after date is changed on date picker via ajax. Unfortunately, I am getting a weird error: “vendors.bundle.js:1 Uncaught TypeError: this.each is not a function” & “jQuery.Deferred exception: this.each is not a function TypeError: this.each is not a function” .

    Wondering if I am reloading data the right way via mDatatable().

     

    Here is my code below:

     

    $(‘input[name=”m_daterangepicker_61″]’).on(‘apply.daterangepicker’, function(ev, picker) {

    //ajax call to pass date over to view

    $.ajax({

    type: ‘POST’,

    url: “/expense/”,

    data: {

    ‘action’: “new_date”,

    ‘new_date’: $(‘input[name=”m_daterangepicker_61″]’).val()

    },

    })

    .done(function(context,result) {

    var lease_names_and_id = context[“lease_names_and_id”];

    var workover_series =context[“workover_series”];

     

    for (each_lease in lease_names_and_id) {

    var datatable = $(“#”+lease_names_and_id[each_lease][“lease_id”]+” > table”).mDatatable();

     

    var each_lease_workover = JSON.stringify(workover_series[each_lease]);

    datatable.setDataSourceQuery(each_lease_workover);

    datatable.reload();

    }

    }).fail(function(jqXHR, textStatus) {

    toastr.error(“There is no or not enough data in that range”)

    })

    //end of ajax call

    });

     

    Thank you

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #15009

    Hi 🙂

    Can you do destroy the previous datatable, and reinit the datatable with the new data.

    var table= $(“#”+lease_names_and_id[each_lease][“lease_id”]+” > table”);

    table.mDatatable(‘destroy’);

    table.mDatatable(  {data:  { source:  each_lease_workover  } } );

    Thanks


    jax824
    Participant

    Posts: 20
    Member Reply #15052

    Thank you. I have tried your reply above, but it seems like the table is destroyed but the tables are not repopulated with new data


    jax824
    Participant

    Posts: 20
    Member Reply #15056

    Jai, just have a quick side questions. It seems like mDatatable commands are a little different from Datatable commands. For example, as you have told me to destroy a table in mDatatable is : <span style=”color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”>table.mDatatable(‘destroy’); And to destroy a datatable from the official datatable documentation is </span><span style=”color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”>table.Datatable.destroy();  I am wondering if there is documentation some where for this template where I read the right way to create or destroy a table and other things similar to this. Overall, a more detailed documentation for this template? </span>

     

     

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #15099

    Hi 🙂

    Reinitialize the datatable should same with the first initialization. Maintain the mDatatable options in variable, then just change the datasource.

    Eg.

    var options = {all complete option with initial data};

    var datatable = $(m_datatable).mDatatable(options);

    Then you want to repopulate the data, you need to destroy existing datatable, update option with new data and reinitialize the datatable with the existing options.

    options.data.source = each_lease_workover ;

    var datatable = $(m_datatable).mDatatable(options);

    Thanks

You must be logged in to reply to this topic.