我正在尝试根据所选标签填充表格,我正在使用带有ajax的JQuery-UI标签库,问题是只有最后一个函数
$('#tabs,#tab-4')。tabs()
正在运行(实际上所有函数都已执行但我只能看到最后一个函数),因此它只会从最后一个选项卡中获取信息。我不确定我是否做得对。
<ul id="tabs">
<li><a href="#tab-1">Abiertos</a></li>
<li><a href="#tab-2">Solucionados</a></li>
<li><a href="#tab-3">Cerrados</a></li>
<li><a href="#tab-4">Cancelados</a></li>
</ul>
<div class="containerTab" id="tab-1">
<table class="table table-striped" id="records_table">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Cliente</th>
<th class="text-center">Producto</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Incidente</th>
<th class="text-center">Operación</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
<div class="containerTab" id="tab-4">
<table class="table table-striped" id="records_table4">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Cliente</th>
<th class="text-center">Producto</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Incidente</th>
<th class="text-center">Cancelado por</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
这是我的脚本部分(我删除了tab-2和tab-3,以免延长时间)
$('#tabs, #tab-1').tabs({
activate: function (event, ui) {
$("#records_table tbody tr").remove();
$.ajax({
type: "POST",
url: "/Servicios/GetIncidentes",
contentType: "application/json; charset=utf-8",
data: "{'incidente':'Abiertos'}",
dataType: "json",
success: function (response) {
$(function () {
$.each(response, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.Id).addClass('text-center'),
$('<td>').text(item.Cliente).addClass('text-center'),
$('<td>').text(item.Producto).addClass('text-center'),
$('<td>').text(item.Descripcion).addClass('text-center'),
$('<td>').text(item.Fecha).addClass('text-center'),
$('<td>').text(item.Incidente).addClass('text-center'),
$('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
).appendTo('#records_table');
});
});
},
error: function (ts) { alert(ts.responseText) }
})
}
});
$('#tabs, #tab-4').tabs({
activate: function (event, ui) {
$("#records_table4 tbody tr").remove();
$.ajax({
type: "POST",
url: "/Servicios/GetIncidentes",
contentType: "application/json; charset=utf-8",
data: "{'incidente':'Cancelados'}",
dataType: "json",
success: function (response) {
$(function () {
$.each(response, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.Id).addClass('text-center'),
$('<td>').text(item.Cliente).addClass('text-center'),
$('<td>').text(item.Producto).addClass('text-center'),
$('<td>').text(item.Descripcion).addClass('text-center'),
$('<td>').text(item.Fecha).addClass('text-center'),
$('<td>').text(item.Incidente).addClass('text-center'),
$('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
).appendTo('#records_table4 tbody');
});
});
},
error: function (ts) { alert(ts.responseText) }
})
}
});
GetIncidentes方法接收一个字符串(字符串incidente)并返回一个解析的Json列表。