Javascript jquery数据表发布

我在一个页面中有三个选项卡，我使用jquery数据表。似乎它们相互影响。我想当一个标签被点击时，其他标签的所有效果都被移除。我已经测试了以下几行，它使它更好，但效果并没有完全消除

$( '#inbox' ).empty();
 $( '#inbox' ).html("");

这不是一种完全释放数据表的方法吗？ 编辑： 这是my 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>

$（文档）.ready（函数（）{
$（“tr td input[type='checkbox']）。live（'change'，function（）{
$（this）.parents（“tr”）.toggleClass（'row_selected'）；
updateActions（）；
});            
$（'#收件箱'）.html（'{%trans“waiting…”%}'）.load（'inbox/'）；
$（“#收件箱_列表”）。单击（函数（）{
$（“#收件箱”）.html（“”）；
$（“#发件箱”）.html（“”）；
$（'#compose'）.html（“”）；
$（'#trash'）.html（“”）；
$（'#收件箱'）.html（'{%trans“waiting…”%}'）.load（'inbox/'）；
});
$（“#发件箱列表”）。单击（函数（）{
$（“#收件箱”）.html（“”）；
$（“#发件箱”）.html（“”）；
$（'#compose'）.html（“”）；
$（'#trash'）.html（“”）；
$（'#发件箱'）.html（'{%trans“waiting…”%}'）.load（'outbox/'）；
});
$（“#编写列表”）。单击（函数（）{
$（“#收件箱”）.html（“”）；
$（“#发件箱”）.html（“”）；
$（'#compose'）.empty（）；
$（'#trash'）.html（“”）；
$（'#compose'）.html（'{%trans“waiting…”%}'）.load（'compose/'）；
});
$（“#垃圾桶列表”）。单击（函数（）{
$（“#收件箱”）.html（“”）；
$（“#发件箱”）.html（“”）；
$（'#compose'）.html（“”）；
$（'#trash'）.html（“”）；
$（'#trash'）.html（'{%trans“waiting…”%}'）.load（'trash1/'）；
});
});






加载。。。
加载。。。
加载。。。
加载。。。

我的三个选项卡中都有这个脚本：

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

// =======================================================================
//数据表和操作按钮
// =======================================================================
可变的；
var action='class=“action fg button ui button ui state default ui state disabled ui corner all'；
var addActionButton=函数（操作）{
$（'#DataTables_Table_0_length'）。在（操作）之前；
};
var updateActions=函数（）{
如果（$（'tr.row_selected'）。长度>0）{
$（'.action:not（.everys'）.removeClass（'ui-state-disabled'））
}
否则{
$（'.action:not（.everys.）.addClass（'ui-state-disabled'）；
}
};
var selectNone=函数（）{
$（'input#select box'）.prop（'checked'，false）；
$（'tr'）.find（'input[type=“checkbox”]：checked'）.prop（'checked'，false.）.change（）；
};
var selectAll=函数（）{
$（'input#select box'）.prop（'checked'，true）；
$（'tr'）.find（'input[type=“checkbox”]：not（：checked'）.prop（'checked'，true.）.change（）；
};
$（函数（）{
oTable=$（“table.messages”）.dataTable({
“aoColumnDefs”：[
{“bSortable”：false，“sWidth”：0，“aTargets”：[0]}，
{“sWidth”：“160px”，“aTargets”：[3,1]}
],
“bJQueryUI”：没错，
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“垃圾/”，
“sPaginationType”：“完整编号”，
“sDom”：“t”，
“语言”：{
“sZeroRecords”：“{%trans”没有与筛选器“%}”匹配的消息，
“sProcessing”：“{%trans”处理“%}”，
“sSearch”：“{%trans”搜索“%}”，
“sInfo”：“{%trans”显示_START_uuuuu到_END_uuuu从_TOTAL_uuumessages”%}”，
“sInfoFiltered”：“{%trans”-从_MAX_uu消息“%}”中筛选，
“sInfoEmpty”：“{%trans”无需解压缩“%}”，
“sLoadingRecords”：“{%trans”正在加载记录“%}”，
“SLENGHMENU”：“{%trans”显示{U菜单\消息”%}”，
“sEmptyTable”：“{%trans”无需解压缩“%}”，
“oPaginate”：{
“sFirst”：“{%trans”First“%}”，
“sLast”：“{%trans”最后一个“%}”，
“前一个”：“{%trans”前一个“%}”，
“sNext”：“{%trans”下一个“%}”
}
}
});
$（“tr td input[type='checkbox']）。live（'change'，function（）{
$（this）.parents（“tr”）.toggleClass（'row_selected'）；
updateActions（）；
});
addActionButton（“”）；
$（'input#select box'）。更改（函数（）{
如果（$（'input#select box:checked'）。长度>0）{
选择全部（）；
}
否则{
选择无（）；
}
});
addActionButton（“”）；
$（'a#refresh'）。单击（函数（）{
选择无（）；
updateActions（）；
oTable.fnDraw（）；
返回false；
});
});
{%trans“发件人”%}{%trans“主题”%}{%trans“日期”%}

将同一类添加到3个表中

<table class="data_tables" ...>

或

或者（如果你想

 $('.data_tables').html("");

$('.data_tables').hide();

$('.data_tables').fadeOut(1000); // 1000 is the millisecond, 1000 = 1 second, you can change it.