动态选项卡上的多个数据表

Question

我已经为我的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--;
});

})();

reports.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();
});