单击按钮后，数据表初始化表(ajax，jquery) [英] datatables initialize table after button click (ajax, jquery)

问题描述

我在加载数据表对象时遇到问题.当我初始化并填充页面加载表时，它可以正常工作.

此代码在页面重新加载时正常工作.

<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>

但是下面的此代码在单击按钮时不起作用.我在做什么错了?

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

        });
    });

按钮ID ="proces_input".单击按钮后，将显示消息警报("Im in").

下面是我的数据表的html表代码(两个示例都相同).

<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>

解决方案

根据您的评论

这不能是服务器问题:(两个ajax请求都相同.

如果您正在向同一表显示数据，则可能存在数据表初始化问题

如果是这样，则需要 destroy 数据表并重新初始化它.

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

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>

解决方案

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

这篇关于单击按钮后，数据表初始化表(ajax，jquery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！