在弹出窗口中显示带有Ajax数据源的jQuery数据表
Display jQuery DataTables with Ajax data source in a popup
我试图根据Ajax请求在弹出窗口中给出一个列表。在Ajax请求之前,列表在弹出窗口中,但是在Ajax请求之后,列表留在页面中而不是弹出窗口,并且在弹出窗口中也有旧的列表。以下是代码
<script>
function CreateMap() {
var chart = AmCharts.makeChart("piechartdiv", {
"type": "pie",
"theme": "light",
"fontFamily":"Calibri",
"dataProvider": [{
"product":"Following",
"value": @following,
"color": "#009688"
}, {
"product":"Not Following",
"value": @notFollowing ,
"color": "#555555"
}],
"legend": {
"align" : "right",
"fontSize" : 14
},
"marginLeft":-100,
"marginTop":-45,
"marginBottom":0,
"labelsEnabled":false,
"colorField": "color",
"valueField": "value",
"titleField": "product",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 20,
"export": {
"enabled": true
}
});
jQuery('.chart-input').off().on('input change', function () {
var property = jQuery(this).data('property');
var target = chart;
var value = Number(this.value);
chart.startDuration = 0;
if (property == 'innerRadius') {
value += "%";
}
target[property] = value;
chart.validateNow();
});
chart.addListener("clickSlice", function (event) {
if ( event.dataItem.title == 'Unfollowing')
{
document.getElementById("s_open").click();
}
});
}
var isAjax = @isAjax;
if(isAjax)
{
CreateMap();
}
else
{
AmCharts.ready(function () {
CreateMap();
});
}
}
<button id="s_open" class="s_open btn-default" style="display:none;">Open popup</button>
<div id="s_follow">
<div class="row" style="border-radius:5px; padding:20px; background-color:#fff;">
<table id="hostTable" class="table table-striped" cellspacing="0">
<thead>
<tr>
<th>Host Table</th>
</tr>
</thead>
<tbody>
@Html.Raw(comparedDataTable.ToString())
</tbody>
</table>
<button class="btn s_close btn-danger">Close</button>
</div>
<script>
$(document).ready(function () {
$('#hostTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'csvHtml5'
],
destroy: true,
} );
});
$(document).ready(function () {
// Initialize the plugin
$('#s_follow').popup({
color: 'black',
opacity: 0.5,
transition: '0.3s',
scrolllock: true
});
});
我们如何把列表hostTable到ajax请求后弹出?
<解决方案/strong>
使用onopen
选项初始化表,见下面的代码。
$(document).ready(function () {
$('#s_follow').popup({
color: 'black',
opacity: 0.5,
transition: '0.3s',
scrolllock: true,
vertical: "top",
onopen: function() {
// If table was initialized before
if ($.fn.DataTable.isDataTable('#hostTable')){
// Clear table
$('#hostTable').DataTable().clear();
}
$('#hostTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'csvHtml5'
],
destroy: true
});
}
});
});
演示strong>
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在php文件中获取$.post-ajax传递的值
- Replacing $ .ajax?
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- Ajax发布表单序列化,发布引号'
- 通过Ajax将JavaScript函数传递给PHP文件
- ajax请求的顺序总是不同的
- 可以't使用Polymer's的核心ajax
- Ajax Live搜索发布到Laravel视图
- Ajax聊天消息重复而不仅仅是更新
- 从控制器返回后Ajax启动事件激发
- PHP AJAX图片上传示例不上传
- 从ajax请求中获取javascript对象
- 如何将简单的 JQuery 自动完成语法与对远程数据源(PHP 脚本)的 ajax 调用相结合
- Kendo UI网格数据源触发过滤器上的额外ajax请求
- Datatables-使用具有多个表和动态参数的Ajax数据源(sAjaxSource)
- 在弹出窗口中显示带有Ajax数据源的jQuery数据表
- 从一个ajax GET创建多个数据源
- 通过C#MVC控制器操作的Async$.ajax调用绑定Kendo数据源