javascript - jQuery 数据表未定义

Question

我在 $(document).ready() 中定义了两个 DataTable，如下所示:

oProdTable1 = $('#productstable1').dataTable( {...} );
oProdTable2 = $('#productstable2').dataTable( {...} );

在 $(document).ready() 之外，我尝试重新加载它们。当我在以下成功函数中放置断点时，我发现oProdTable1已定义，但oProdTable2未定义:

function addProduct(productLine) {

    $.ajax({
        type: "POST",
        url: 'ajax-add-product.php',
        data: { productLine: productLine},
        success: function(data) {
            oProdTable1.fnReloadAjax();
            oProdTable2.fnReloadAjax();
        }
    }); 
}

我找不到这两个表的定义之间的区别。我还想知道为什么 oProdTable1 不需要用“var”声明，但却被定义了。有什么想法吗？

编辑:我应该注意到，oProdTable1 显示正确，但 oProdTable2 要求我单击以按列排序才能显示行。

EDIT2:我尝试将 addProduct() 放入 $(document).ready() 中。 oProdTable1 仍然未定义，oProdTable2 仍然未定义。我尝试将 oProdTable2 放在 oProdTable1 之前，但现在 oProdTable1 甚至无法加载，并且两个表都未定义!

EDIT3:oProdTable2 之后代码中的每个 DataTable 都不会加载并且未定义。我使用 Notepad++ 比较插件比较了 oProdTable1 和 oProdTable2 代码，但找不到任何重大差异，例如我认为可能导致此问题的缺少大括号。

EDIT4:这是oProdTable2的代码，这似乎有问题:

oProdTable2 = $('#productstable2').dataTable( {
    "aaSorting": [[ 1, "asc" ]],
    "aoColumnDefs":[
    {"aTargets":[0],"bSearchable":false,"bVisible": false},
    {"aTargets":[1],"sWidth":"60px"},
    {"aTargets":[2],"sWidth":"200px"},
    {"aTargets":[3],"sWidth":"300px"},
    {"aTargets":[4],"sWidth":"60px"},
    {"aTargets":[5],"sWidth":"60px"},
    {"aTargets":[6],"sWidth":"60px"},
    {"aTargets":[7],"sWidth":"60px"},
    {"aTargets":[8],"sWidth":"60px"},
    {"aTargets":[9],"sWidth":"60px"},
    {"aTargets":[10],"sWidth":"60px"},
    {"aTargets":[11],"sWidth":"60px"},

    { "sClass": "usa", "aTargets": [ 4, 5 ] },
    { "sClass": "can", "aTargets": [ 6, 7 ] },
    { "sClass": "lat", "aTargets": [ 8, 9 ] },
    ],
    "iDisplayLength": 100, //sets item limit for table
    "bJQueryUI": true,
    "bProcessing": true,
    "bServerSide": true,
    "bSortCellsTop": true,
    //"bStateSave": true,
    "bSortClasses": false,
    "sDom": 'T<"clear">C<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
    "oTableTools": {
        "sRowSelect": "single",
        "sSwfPath": "/swf/copy_cvs_xls_pdf.swf",
        "aButtons": 
        [   
            //"Add Product" button

            {
                "sExtends":    "text",
                "sButtonText": "Add Product",                  
                "fnClick": function ( nButton, oConfig, oFlash ) {

                    addProduct("2");
                }
            },  
            {
                    "sExtends":    "collection",
                    "sButtonText": "Export",
                    "aButtons":    [    "copy","print","csv", "xls", "pdf" ]
            }
         ]

    },
    'sAjaxSource': 'ajax-getproductstable.php',

    "fnServerParams": function ( aoData ) {

       aoData.push( { "name": "productLine", "value": "2" } );

    },      
    "fnInitComplete": function() {
            var oSettings = $('#productstable2').dataTable().fnSettings();
            for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
                if(oSettings.aoPreSearchCols[i].sSearch.length>0){
                $("thead input")[i-1].value = oSettings.aoPreSearchCols[i].sSearch;
                $("thead input")[i-1].className = "activefilter";   }
            }
    },
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

        var id = aData[0];


        $(this.fnGetTds(nRow)[1]).addClass("editable").addClass("ref"); 
        $(this.fnGetTds(nRow)[2]).addClass("edit_area").addClass("name");           
        $(this.fnGetTds(nRow)[3]).addClass("edit_area").addClass("description");            
        $(this.fnGetTds(nRow)[4]).addClass("editable").addClass("price_rtl_usa");           
        $(this.fnGetTds(nRow)[5]).addClass("editable").addClass("price_dlr_usa");           
        $(this.fnGetTds(nRow)[6]).addClass("editable").addClass("price_rtl_can");       
        $(this.fnGetTds(nRow)[7]).addClass("editable").addClass("price_dlr_can");
        $(this.fnGetTds(nRow)[8]).addClass("editable").addClass("price_rtl_lat");       
        $(this.fnGetTds(nRow)[9]).addClass("editable").addClass("price_dlr_lat");       
        $(this.fnGetTds(nRow)[10]).addClass("editable").addClass("ins_val_rtl_usa");
        $(this.fnGetTds(nRow)[11]).addClass("editable").addClass("ins_val_dlr_usa");
        $(this.fnGetTds(nRow)[12]).addClass("editable").addClass("ins_val_rtl_can");
        $(this.fnGetTds(nRow)[13]).addClass("editable").addClass("ins_val_dlr_can");
        $(this.fnGetTds(nRow)[14]).addClass("editable").addClass("net_l");
        $(this.fnGetTds(nRow)[15]).addClass("editable").addClass("net_w");
        $(this.fnGetTds(nRow)[16]).addClass("editable").addClass("net_h");
        $(this.fnGetTds(nRow)[17]).addClass("editable").addClass("net_weight");
        $(this.fnGetTds(nRow)[18]).addClass("editable").addClass("packed_l");
        $(this.fnGetTds(nRow)[19]).addClass("editable").addClass("packed_w");
        $(this.fnGetTds(nRow)[20]).addClass("editable").addClass("packed_h");
        $(this.fnGetTds(nRow)[21]).addClass("editable").addClass("packed_weight");
        $(this.fnGetTds(nRow)[22]).addClass("editable").addClass("customs_cost");
        $(this.fnGetTds(nRow)[23]).addClass("editable").addClass("customs_desc");
        $(this.fnGetTds(nRow)[24]).addClass("editable").addClass("customs_code");
        $(this.fnGetTds(nRow)[25]).addClass("editable").addClass("customs_origin");
        $(this.fnGetTds(nRow)[26]).addClass("edit_area").addClass("note");


        $(nRow).attr("id", id);



        return nRow;
    },
    "fnDrawCallback": function () {


        // CODE FOR EDITABLE INLINES        
        $(".edit_area_w").editable('ajax-edit-product-inline.php', {
            type : 'mce',
            submit : 'OK',
            indicator : "Saving...",
            tooltip : 'Click to edit...',
            width : '500px',
            height : '100px',
            "callback": function( sValue, y ) { 
                $(this).removeClass('empty_edit');
                $("#productstable tr").removeClass("just_edited");
                $(this).parent().addClass("just_edited");
                var aPos = oProdTable2.fnGetPosition( this );
                var update = oProdTable2.fnUpdate( sValue, aPos[0], aPos[2], true, true);
            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oProdTable2.fnGetPosition( this )[2]
                };
            }
        });

        $('.editable').editable('ajax-edit-product-inline.php', {
            event     : "dblclick",
            "callback": function( sValue, y ) { 
                $(this).removeClass('empty_edit');
                $("#productstable tr").removeClass("just_edited");
                $(this).parent().addClass("just_edited");
                var aPos = oProdTable2.fnGetPosition( this );
                var update = oProdTable2.fnUpdate( sValue, aPos[0], aPos[2], true, true);
            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oProdTable2.fnGetPosition( this )[2]
                };
            },
            "height": "14px"
        } );

        $('.edit_area').editable('ajax-edit-product-inline.php', {
            event     : "dblclick",
            type      : "textarea",
            cancel    : 'Cancel',
            submit    : 'OK',
            indicator : '<img src="img/indicator.gif">',
            "callback": function( sValue, y ) { 
                $(this).removeClass('empty_edit');
                $("#productstable tr").removeClass("just_edited");
                $(this).parent().addClass("just_edited");
                var aPos = oProdTable2.fnGetPosition( this );
                oProdTable2.fnUpdate( sValue, aPos[0], aPos[2]);

            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oProdTable2.fnGetPosition( this )[2]
                };
            },

        } );

        $('.edit_select').editable('ajax-edit-product-inline.php', { 
            event     : "dblclick",
            loaddata: function ( value, settings ) {
                return {
                    "pid": $(this).parent().attr("id")
                };
            },
            loadurl : 'ajax-part-selects.php',
            loadtype: "GET",
            type   : 'select',
            submit : 'OK',
            "callback": function( sValue, y ) { 
                $(this).removeClass('empty_edit');
                $("#productstable tr").removeClass("just_edited");
                $(this).parent().addClass("just_edited");
                var aPos = oProdTable2.fnGetPosition( this );
                oProdTable2.fnUpdate( sValue, aPos[0], aPos[2]);

            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oProdTable2.fnGetPosition( this )[2]
                };
            },
        });



    }
} );

$("#productstable2  .floating_filters input").keyup( function () {
    // Filter on the column (the index) of this element
    oProdTable2.fnFilter( this.value, $(".floating_filters input").index(this)+1 );
    $(this).addClass("activefilter");
} );


$("#productstable2 .floating_filters input").each( function (i) {

    asInitVals[i] = this.value;
} );

$("#productstable2 .floating_filters input").focus( function () {

    if ( $(this).hasClass("search_init"))
    {
        this.className = "";
        this.value = "";
    }
} );

$("#productstable2 .floating_filters input").blur( function (i) {

    if ( this.value == "" )
    {
        $(this).removeClass("activefilter");
        $(this).addClass("search_init");
        this.value = asInitVals[$(".floating_filters input").index(this)];

    }
} );

Answer 1

终于找到解决办法了!问题甚至不在于 javascript 代码，而在于 html。 ID 为“productstable2”的表的“td”比“th”少一个。我只需要添加一个额外的 <td></td>到“td”列表。