我在一页中有三个选项卡，我使用 jquery 数据表。似乎它们相互影响。我希望在单击选项卡时删除其他选项卡的所有效果。我已经在下面进行了测试，它使它变得更好，但效果并没有完全消除。
$( '#inbox' ).empty();
$( '#inbox' ).html("");
不是完全释放数据表的方法吗？编辑：这是我的 base.html，其中包含 4 个选项卡，其中三个使用数据表：
<script type="text/javascript">
$( document ).ready( function() {
$("tr td input[type='checkbox']").live('change', function() {
$(this).parents("tr").toggleClass('row_selected');
updateActions();
});
$( '#inbox' ).html( '{% trans "waiting ..." %}' ).load( 'inbox/');
$( '#inbox_list' ).click( function() {
$( '#inbox' ).html("");
$( '#outbox' ).html("");
$( '#compose' ).html("");
$( '#trash' ).html("");
$( '#inbox' ).html( '{% trans "waiting ..." %}' ).load( 'inbox/');
});
$( '#outbox_list' ).click( function() {
$( '#inbox' ).html("");
$( '#outbox' ).html("");
$( '#compose' ).html("");
$( '#trash' ).html("");
$( '#outbox' ).html( '{% trans "waiting ..." %}' ).load( 'outbox/');
});
$( '#compose_list' ).click( function() {
$( '#inbox' ).html("");
$( '#outbox' ).html("");
$( '#compose' ).empty();
$( '#trash' ).html("");
$( '#compose' ).html( '{% trans "waiting ..." %}' ).load( 'compose/');
});
$( '#trash_list' ).click( function() {
$( '#inbox' ).html("");
$( '#outbox' ).html("");
$( '#compose' ).html("");
$( '#trash' ).html("");
$( '#trash' ).html( '{% trans "waiting ..." %}' ).load( 'trash1/');
});
});
</script>
<ul class="tabber">
<li><a id="inbox_list" href="#inbox">{% trans "inbox" %}</a> </li>
<li><a id="outbox_list" href="#outbox">{% trans "sent" %}</a> </li>
<li><a id="compose_list" href="#compose">{% trans "compose" %}</a> </li>
<li><a id="trash_list" href="#trash">{% trans "trash" %}</a> </li>
</ul>
<div class="clear"></div>
<div id="inbox" class="tabContent">
loading...
</div>
<div id="outbox" class="tabContent">
loading...
</div>
<div id="compose" class="tabContent">
loading...
</div>
<div id="trash" class="tabContent">
loading...
</div>
我的三个标签中有这个脚本：
<script type="text/javascript">
// =======================================================================
// DataTables and action buttons
// =======================================================================
var oTable;
var action = 'class="action fg-button ui-button ui-state-default ui-state-disabled ui-corner-all"';
var addActionButton = function (action) {
$('#DataTables_Table_0_length').before(action);
};
var updateActions = function () {
if ($('tr.row_selected').length > 0) {
$('.action:not(.always)').removeClass('ui-state-disabled')
}
else {
$('.action:not(.always)').addClass('ui-state-disabled');
}
};
var selectNone = function () {
$('input#select-box').prop('checked', false);
$('tr').find('input[type="checkbox"]:checked').prop('checked', false).change();
};
var selectAll = function () {
$('input#select-box').prop('checked', true);
$('tr').find('input[type="checkbox"]:not(:checked)').prop('checked', true).change();
};
$(function() {
oTable = $("table.messages").dataTable({
"aoColumnDefs": [
{ "bSortable": false, "sWidth": 0, "aTargets": [ 0 ] },
{ "sWidth": "160px", "aTargets": [ 3,1 ] }
],
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "trash/",
"sPaginationType": "full_numbers",
"sDom": '<"#filter"f><"clear"><"H"lr><"#htool">t<"F"ip>',
"oLanguage": {
"sZeroRecords": '{% trans "No messages match your filter" %}',
"sProcessing": '{% trans "Processing" %}',
"sSearch": '{% trans "Search" %}',
"sInfo": '{% trans "Displaying _START_ to _END_ from _TOTAL_ messages" %}',
"sInfoFiltered": '{% trans " - filtered from _MAX_ messages" %}',
"sInfoEmpty": '{% trans "Nothing to desplay" %}',
"sLoadingRecords": '{% trans "Loading records" %}',
"sLengthMenu": '{% trans "Display _MENU_ messages" %}',
"sEmptyTable": '{% trans "Nothing to desplay" %}',
"oPaginate": {
"sFirst": '{% trans "First" %}',
"sLast": '{% trans "Last" %}',
"sPrevious": '{% trans "Previous" %}',
"sNext": '{% trans "Next" %}'
}
}
});
$("tr td input[type='checkbox']").live('change', function() {
$(this).parents("tr").toggleClass('row_selected');
updateActions();
});
addActionButton('<input type="checkbox" id="select-box">');
$('input#select-box').change(function() {
if($('input#select-box:checked').length > 0){
selectAll();
}
else {
selectNone();
}
});
addActionButton('<a href="#" id="refresh" class="always action fg-button ui-button ui-state-default ui-corner-all">{% trans "refresh " %}</a>');
$('a#refresh').click(function() {
selectNone();
updateActions();
oTable.fnDraw();
return false;
});
});
</script>
<table class="messages">
<thead>
<tr><th></th><th>{% trans "Sender" %}</th><th>{% trans "Subject" %}</th><th>{% trans "Date" %}</th></tr>
</thead>
<tbody>
</tbody>
</table></div>