破坏后的多次初始化

时间:2015-09-09 13:57:35

标签: javascript jquery datatables closures

我有一个创建DataTables实例的函数,由于某种原因,它在破坏后初始化n次。我只注意到了这一点,因为我在init上添加自定义字段并且它们正在成倍增加。我可以阻止这种情况,但只能处理症状。

澄清,在我"销毁之后:实例并重新初始化它,更改数据源,如果它是第二次初始化两次。如果它是第三次,等等三次

我推测表变量是函数形成的闭包的一部分,因为即使我设置table = null也会发生同样的事情。

我该如何防止这种情况?

DataTables功能

/*Create a DataTable on tableElementID using pageUrl as the source*/
    function ajaxLoadTable ( pageUrl, tableElementID ) {

        window.table = $(tableElementID)
             .on( 'init.dt', function () {
            //The success function is used internally so it should NOT be overwritten, have to listen for this event instead
            //Add our custom fields _length refers to an element generated datatables                                           
                if ( additionalElements.saveButton ) {
                    $(tableElementID + '_length').after('<div class="dataTables_filter"><button>Save All Edits</button></div>');
                }

                if ( additionalElements.selectState ) {
                    $(tableElementID + '_length').after('<div class="dataTables_filter"><label>Project State: <select name="projectState" style="width:auto;"><option>Select ...</option><option value="Active">Active</option><option value="Historical">Historical</option></select></label></div>');
                }

                if ( additionalElements.searchBox ) {
                    $(tableElementID + '_length').after('<div class="dataTables_filter"><label>Search:<input type="search" id="customSearch" style="width:auto;"></label></div>');
                }   
            })
            .DataTable({ 
                        "processing": true,
                        "serverSide": true,
                        "ajax":{
                            type: "POST",
                            url: pageUrl,
                            data:  function ( additionalData ) {
                                        $('.serverData').each( function( index, element ){
                                            if( element.nodeName === "SELECT"){
                                              additionalData[element.name.toUpperCase()] =  element.options[element.selectedIndex].value;
                                              return true; //return true is equivalent to continue for $.each
                                            }
                                            additionalData[element.name.toUpperCase()] = element.value;
                                        });
                                    },
                            dataType: "json"                                    
                        }, 
                         "pageLength": 4,
                         "lengthMenu": [ 4, 8, 12, 16, 24 ],
                         "searchDelay": 1500,
                         "columnDefs": 
                                        {   "targets": 0, 
                                            "orderable": false,     
                                            "data": {
                                                "_":    "display"
                                            } 
                                        }
            });
    }

销毁功能

/*Load the selected project state*/
    $('html').on( 'change' , '[name=projectState]' ,function(){
        var currentState = $('option:selected', this).val();

        $('#projectState').val(currentState);

    //Remove the old table records and the datatables. Order matters, otherwise there is unsual behavior. 
        if(  $.fn.DataTable.isDataTable( '#searchTable' ) ) { 
            window.table.destroy();
            window.table = null;
        }

        $('.projectStateText').html( currentState );

    //Get the new table records 
        ajaxLoadTable( *some undisclosed URL*, '#searchTable');
    });

0 个答案:

没有答案