CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
Maciejski Pawel
Maciejski Pawel

Reputation: 111

datatables initialize table after button click (ajax, jquery)

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>

Upvotes: 5

Views: 14327

Answers (3)

Kiran
Kiran

Reputation: 59

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"]]            
                    });          
    });
});

Upvotes: 1

Sebastianb
Sebastianb

Reputation: 2060

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();
    });
});

Upvotes: 2

Shantaram Tupe
Shantaram Tupe

Reputation: 1666

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') }}"
        });
    });
});

Upvotes: 3

Related Questions