我为我的 Web 应用程序开发了一个动态选项卡机制，任何内部内容都将使用 ajax 在新选项卡中加载，该选项卡将附加在最后一个活动选项卡中，例如浏览器中用于执行加载内容的选项卡功能 js 我只是有一个命名空间自定义 html5数据标签女巫是脚本的名称，我在创建新选项卡时执行它的 init() 方法，它在简单的 jquery 脚本上运行良好，但是当我尝试在其中加载带有 jQuery Datatable 的页面时，我正在使用对于报告，我的报告过滤器表单仅适用于最后一个数据表，我不知道如何解决这个问题，这是我的 tabs.js 和 reports.js 代码，第二个是 Datatable javascripts。
tabs.js：
(function() {
// open e new tab:
var tabs_label = 1;
var tab_id = 1;
var tabs_num = 1;
var defaults_open = false;
var reports_open = false;
var ns ;//needs change
$('.tab-link').live('click',function(e) {
var parent = $(this);
var href = $(this).attr('href');
if (href == '/defaults/' && defaults_open){
e.preventDefault();
bootbox.alert('تب تعریف پیش فرض ها باز می باشد!');
}
// else if(href == '/report/' && reports_open){
// e.preventDefault();
// bootbox.alert('تب گزارش ها باز می باشد');
// }
else{
var tab_name = $(this).attr('data-name');
e.preventDefault();
tab_id ++;
if (tabs_num > 6) {
bootbox.alert('تب های باز شده بیش از حد مجاز است.');
}
else {
$('.tab-pane').filter('.active').removeClass('active');
$.blockUI({ message: $('#wait-icon'), css: {width: '64px', height: '64px' }});
var content = $('<div></div>', {
class:"tab-pane dynamic-tab active",
id:tab_id,
});
content.appendTo('div#main-tabs');
$('ul.nav-tabs li.active').removeClass('active');
var new_li = $("<li class='active' data-type='"+href+"'><a style='float:left' class='tabbtn' href="+tab_id+" data-toggle='tab'>"+tabs_label+" - "+tab_name+"</a><a style='float:right' class='close' id='tabClose'><i class='icon-remove'></i></a></li>")
new_li.appendTo('ul#tabs');
content.load( href + ' div#arya', function(response, status, xhr) {
if(parent.attr('namespace')){
ns = eval(parent.attr('namespace'));
if(ns.root){
ns.root = content;
}
ns.init();
}
$.unblockUI();
if(status == 'error'){
bootbox.alert("در حال حاضر سرور با مشکل مواجه است", "خروج", function(){
new_li.find("a.close").trigger('click');
});
}
});
tabs_num++;
tabs_label++;
if(href == '/defaults/'){
defaults_open = true;
}
else if(href == '/report/'){
reports_open = true;
}
}
}
});// sell tab name needs work.
// tab activatior function
$('#tabs a.tabbtn').live('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
var selector = 'div#' + id;
$('.dynamic-tab').filter('.active').removeClass('active');
var new_tab = $('.dynamic-tab').filter(selector);
new_tab.addClass('active');
console.log(new_tab);
ns.root = new_tab;
});
// close a tab:
$('a#tabClose').live('click', function(e) {
e.preventDefault();
$this = $(this);
var a = $this.siblings('a');
var li = $this.parent();
console.log(li);
if(li.attr('data-type') == '/defaults/'){
defaults_open = false;
}
else if(li.attr('data-type') == '/report/'){
reports_open = false;
}
var id = a.attr('href');
var div = $('div#' + id);
if (div.hasClass('active')){
var last = div.siblings('div.tab-pane').last();
last.addClass('active');
ns.root = last;
}
div.detach();
var li = a.parent();
if (li.siblings('.active').length == 0){
li.siblings('li').last().addClass('active');
}
li.detach();
tabs_num--;
tabs_label--;
});
})();
报告.js：
var reports = {
'root': $('.tab-pane#defaults_init'),
'table_init': function() {
var oTable;
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource ) {
if ( typeof sNewSource != 'undefined' )
oSettings.sAjaxSource = sNewSource;
console.log($(this));
this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var myData = new Array({ "name": "name", "value": reports.root.find('#name').val()}, { "name": "family", "value": reports.root.find('#family').val()}, { "name": "national_id", "value": reports.root.find('#national_id').val()}, { "name": "city", "value": reports.root.find('#city').val()}, { "name": "job", "value": reports.root.find('#job').val()}, { "name": "date_from", "value": reports.root.find('#date_from').val()}, { "name": "date_to", "value": reports.root.find('#date_to').val()}, { "name": "age_from", "value": reports.root.find('#age_from').val()}, { "name": "age_to", "value": reports.root.find('#age_to').val()}, { "name": "credit_from", "value": reports.root.find('#credit_from').val()}, { "name": "credit_to", "value": reports.root.find('#credit_to').val()});
$.ajax({
url: oSettings.sAjaxSource,
dataType: 'json',
data: myData,
type: "POST",
success: function(json) {
/* Got the data - add it to the table */
for ( var i=0 ; i<json.aaData.length ; i++ ) {
that.oApi._fnAddData( oSettings, json.aaData[i] );
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw( that );
that.oApi._fnProcessingDisplay( oSettings, false );
}
});
}
},
'init': function(){
oTable = reports.root.find('.targetTable').dataTable( {
"sDom": "<'row-fluid'r<'span12'l>>t<'row-fluid'<'span6'p><'span6'i>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sUrl": "/media/translation/dataTables.persian.txt"
},
"sAjaxSource": "/report/ajax/customers/",
"sServerMethod": "POST",
"bDestroy": true,
// "bRetrieve": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "name", "value": reports.root.find('#name').val()} );
aoData.push( { "name": "family", "value": reports.root.find('#family').val()});
aoData.push( { "name": "national_id", "value": reports.root.find('#national_id').val()} );
aoData.push( { "name": "city", "value": reports.root.find('#city').val()} );
aoData.push( { "name": "job", "value": reports.root.find('#job').val()} );
aoData.push( { "name": "date_from", "value": reports.root.find('#date_from').val()} );
aoData.push( { "name": "date_to", "value": reports.root.find('#date_to').val()} );
aoData.push( { "name": "age_from", "value": reports.root.find('#age_from').val()} );
aoData.push( { "name": "age_to", "value": reports.root.find('#age_to').val()} );
aoData.push( { "name": "credit_from", "value": reports.root.find('#credit_from').val()} );
aoData.push( { "name": "credit_to", "value": reports.root.find('#credit_to').val()} );
console.log(aoData);
},
"aoColumns": [
{ "mDataProp": "name" },
{ "mDataProp": "family" },
{ "mDataProp": "national_id" },
{ "mDataProp": "birthday" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "phone" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "cellphone" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "email" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "city" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "country" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "address" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "job" },
{ "mDataProp": "credit" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "age" ,"bSearchable": false, "bVisible": false},
{ "mDataProp": "creation_time" ,"bSearchable": false, "bVisible": false},
],
} );
/* Add a click handler to the rows - this could be used as a callback */
$('#targetTable tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
infoTpl = "<div class='row-fluid span12'><table class='table table-striped'><tbody>";
infoTpl += "<tr><td>نام: <span>"+aData['name']+"</span></td><td>نام خانوادگی: <span>"+aData['family']+"</span></td><td>کد ملی: <span>"+aData['national_id']+"</span></td><td>تاریخ تولد: <span>"+aData['birthday']+"</span></td></tr>";
infoTpl += "<tr><td>تلفن: <span>"+aData['phone']+"</span></td><td>تلفن همراه: <span>"+aData['cellphone']+"</span></td><td colspan='2'>ایمیل: <span>"+aData['email']+"</span></td></tr>";
infoTpl += "<tr><td colspan='2'>آدرس: <span>"+aData['address']+"</span></td><td>شهر: <span>"+aData['city']+"</span></td><td>کشور: <span>"+aData['country']+"</span></td></tr>";
infoTpl += "<tr><td>سن: <span>"+aData['age']+"</span></td><td>میزان اعتبار: <span>"+aData['credit']+"</span></td><td>تاریخ ایجاد در سیستم: <span>"+aData['creation_time']+"</span></td></tr>";
infoTpl += "</tbody></table></div>";
reports.root.find('#targetInfo').html(infoTpl);
reports.root.find('#targetInfo > div > table > tbody > tr > td > span').css("color","navy");
$(this).toggleClass('row_selected');
} );
reports.root.find('#queryForm').submit(function() { // catch the form's submit event
oTable.fnReloadAjax();
return false;
});
},
};
$(document).ready(function () {
reports.table_init();
});