datatables initialize table after button click (ajax, jquery)

Question

I have a problem loading datatables object. When I initialize and populate table on page load it works properly.

THIS CODE BELOW WORKS PERFECT AT PAGE RELOAD.

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
  var table = $('#dt_110x_complex').DataTable({
    paging : true,
    scrollY: 300,
    ajax: "{{ url_for('complex_data') }}"
  });

});
</script>

But this code below DOES NOT WORK on button click. What am I doing wrong?

$(function() {
    $('#proces_input').on('click', function() {
        alert('Im in')
        var table = $('#dt_110x_complex').DataTable({
        paging : true,
        scrollY: 300,
        ajax: "{{ url_for('complex_data') }}"
        });

        });
    });

The button id = "proces_input". Message alert('Im in') shows after button click.

Below is my html table code (for both samples the same) for datatables.:

<div class="row">
<div class="col-lg-12">
<table id="dt_110x_complex" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>date</th>
<th>blocade</th>
<th>konti</th>
<th>free</th>
<th>occ</th>
<th>origin</th>
<th>type</th>
<th>created</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

from what i could tell (trying it in jsfiddle) it worked (did not load data of cause). Here is the link: jsfiddle.net/aqk0egy1/1 — Michael Ritter
– Michael Ritter, Commented Jan 22, 2017 at 22:25
Yes, js script works, but no data recived. In my web browser debuger (firefox) XHR section when page load I get a response (data) but when button click the response is empty and status code is empty, 0 bytes transfered. This can not be server problem :( both ajax request are the same. — Maciejski Pawel
– Maciejski Pawel, Commented Jan 22, 2017 at 23:11
Yes, I have them both on my website. When page reloads the <table id="dt_110x_complex"> element is populated, then I click button i have another table element <table id="dt_110x_click"> fot testing witch should be populated by the other javascript code (the one with on 'click' event). Of course it coresponds to <table id="dt_110x_click"> element). — Maciejski Pawel
– Maciejski Pawel, Commented Jan 23, 2017 at 8:05

Shantaram Tupe · Accepted Answer · 2017-01-23 13:37:48Z

3

As per you commented

This can not be server problem :( both ajax request are the same.

And If you are Showing data to same table, then there may be Datatable initialising problem

If this is so You need to destroy datatable and reinitialize it On buton click:

using destroy : true,

$(function() {
    $('#proces_input').on('click', function() {
        alert('Im in')
        var table = $('#dt_110x_complex').DataTable({
            paging : true,
            destroy : true,    <-------Added this 
            scrollY: 300,
            ajax: "{{ url_for('complex_data') }}"
        });
    });
});

answered Jan 23, 2017 at 13:37

Shantaram Tupe

1,6664 gold badges17 silver badges44 bronze badges

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

2 Comments

Maciejski Pawel Over a year ago

I made it simple as possible for test. Html code is the same for both options. I run website with first javascript option (the one with $(document).ready(...etc) and it loads data on page reload. The second script (the one with $('#proces_input').on('click',....etc ) and ajax does not return any data after button click. I think i start not to like DataTables :/

Sebastianb Over a year ago

@MaciejskiPawel try adding the destroy option to the first instance of the datatable (the one you initialize on document ready)

Sebastianb · Accepted Answer · 2017-01-24 19:36:40Z

2

If your intention is to reload the data the table is displaying, you could simply use the reload API function from datatables in the click callback:

$('#proces_input').on('click', function() {
       table.ajax.reload();
    });

table should be a global variable though.

If for some reason you need to re-create the table, you should add the destroy option to Datatables the first time you create it (i.e.: on document ready), and obviate any option when you re-create the datatable on the click callback:

$(function() {
    $('#proces_input').on('click', function() {
        alert('Im in')
        $('#dt_110x_complex').DataTable();
    });
});

answered Jan 24, 2017 at 19:36

Sebastianb

2,06024 silver badges31 bronze badges

1 Comment

annoyingmouse Over a year ago

Working example of first bit of solution here: jsfiddle.net/annoyingmouse/ju2bmtm7

Kiran · Accepted Answer · 2019-11-21 13:43:18Z

This worked for me after a lot of research:- I have created button with ID "eventlistview" and on click of this re initializing the data table.

// global variable
var grid;
jQuery(document).ready(function ($) {
 //initialise blank datatable on page load
  grid = $('#grd').DataTable({
           "processing": false, // control the processing indicator.
           paging: false,
            searching: false,
            info: false,
          // you can load data here also as per requirement
         });
});

jQuery(document).ready(function ($) {
  jQuery('#eventlistview').click(function () {
     // destroy datatable
     $("#grd").dataTable().fnDestroy()
     //reinitialise datatable
      $("#grd").dataTable({
          "processing": false, // control the processing indicator.
          "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
          "ajax": {"url": "",
                    "type": "GET",
                   },
          "language": {"emptyTable": "No data found."
                      },
           columns: [{ "data": "TitleTxt" },
                      {"data": "StartDate"},
                      {"data": "EndDate"},
                    ],
           "order": [[0, "asc"]]            
                    });          
    });
});

Collectives™ on Stack Overflow

datatables initialize table after button click (ajax, jquery)

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related