javascript - datatables initialize table after button click (ajax, jquery) - Stack Overflow

admin管理员组

文章数量:1433902

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=".10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
  var table = $('#dt_110x_plex').DataTable({
    paging : true,
    scrollY: 300,
    ajax: "{{ url_for('plex_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_plex').DataTable({
        paging : true,
        scrollY: 300,
        ajax: "{{ url_for('plex_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_plex" 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>

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/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
  var table = $('#dt_110x_plex').DataTable({
    paging : true,
    scrollY: 300,
    ajax: "{{ url_for('plex_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_plex').DataTable({
        paging : true,
        scrollY: 300,
        ajax: "{{ url_for('plex_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_plex" 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>

• javascript
• jquery
• ajax
• datatables

Share Improve this question Follow edited Jan 24, 2017 at 20:07 Sam 7,67877 gold badges5353 silver badges6262 bronze badges asked Jan 22, 2017 at 22:04 Maciejski PawelMaciejski Pawel 11111 gold badge22 silver badges66 bronze badges 5

• from what i could tell (trying it in jsfiddle) it worked (did not load data of cause). Here is the link: jsfiddle/aqk0egy1/1 – 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 Commented Jan 22, 2017 at 23:11
• you are not running them both are you? One after the other? – Bindrid Commented Jan 23, 2017 at 4:32
• Yes, I have them both on my website. When page reloads the <table id="dt_110x_plex"> 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 Commented Jan 23, 2017 at 8:05
• your both table are different ? – Shantaram Tupe Commented Jan 23, 2017 at 13:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

As per you mented

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_plex').DataTable({
            paging : true,
            destroy : true,    <-------Added this 
            scrollY: 300,
            ajax: "{{ url_for('plex_data') }}"
        });
    });
});

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_plex').DataTable();
    });
});

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

本文标签： javascriptdatatables initialize table after button click (ajaxjQuery)Stack Overflow