[英]unable to Initialize Jquery DataTables on button click Ajax call
[英]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"。 单击按钮后显示消息 alert('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') }}"
});
});
});
如果您打算重新加载表显示的数据,您可以简单地在单击回调中使用数据表中的重新加载 API 函数:
$('#proces_input').on('click', function() {
table.ajax.reload();
});
table
应该是一个全局变量。
如果由于某种原因需要重新创建表,则应在第一次创建数据表时将destroy
选项添加到数据表中(即:文档准备好时),并在单击回调中重新创建数据表时取消任何选项:
$(function() {
$('#proces_input').on('click', function() {
alert('Im in')
$('#dt_110x_complex').DataTable();
});
});
经过大量研究,这对我有用:-我创建了 ID 为“eventlistview”的按钮,单击此按钮会重新初始化数据表。
// 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"]]
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.