⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

DataTables warning (table id = 'DataTables_Table_0')



Echeng91

Echeng91
  • profile picture
  • Member

Posted 26 September 2017 - 02:43 AM

I'm currently developing a webpage that when user input the data needed in Advance Filtering and click on the button'Search Result',the table will show the data needed,but the problem is i get the error of DataTables warning (table id = 'DataTables_Table_0'): 

DataTables warning: To retrieve the DataTables object for this table,pass no arguments or see thr docs for bRetrieve and bDestroy

 when i try to load the page.

 

This is my javascript code:

(function() {
  /* --- caching dom based on structure--- */
 
  var $document   = $(document.body);
 
  // -*
  var $msp_filter    = $document.find("#msp_filter");
  
    // -**
    var $msp_open_btn  = $msp_filter.find("#msp_open_btn"); 
    var $msp_content   = $msp_filter.find("#msp_filter_content");
  
      // -***
      var $f_month       = $msp_content.find("#f_month");
      var $f_month_2     = $f_month.next();
      var $f_date        = $msp_content.find("#f_date");
      var $f_time      = $msp_content.find("#f_time");
      var $f_product     = $msp_content.find("#f_product");
      var $f_comp        = $msp_content.find("#f_comp");
      var $f_order       = $msp_content.find("#f_order");
      var $f_select_co   = $f_month.add([$f_product[0], $f_comp[0], $f_order[0], $f_month_2[0]]);
      
     
      // -***
      var $f_t_search    = $msp_content.find("#f_text_search");
      var $f_f_search    = $msp_content.find("#f_form_search");
      var $f_t_refresh   = $f_f_search.next();
      var $f_f_reset     = $f_t_refresh.next();
  
  // -*
  var $msp_table  = $msp_filter.next();
  
  // -**
  var $huntertable  = $msp_table.find(".hunter-table");
  var $wrapper__btn = $msp_table.find("header").find(".t_r").find("a");
  
  // -***
  var $SummaryTable = $huntertable.find(".SummaryTable");
  
  // -*
  var $msp__daily_wrapper = $document.find("#msp__daily_wrapper");
  
  // -*
  var $msp__form_wrapper  = $msp__daily_wrapper.next();
  
  // -*
  var $msp__rep_wrapper   = $msp__form_wrapper.next();
  var $rTable             = $msp__rep_wrapper.find("#prl-table");
  
  // -*
  var $msContainer        = $msp__form_wrapper.length ? ($msp__rep_wrapper.next()) : ($document.find("#msContainer")) ;

  var sectionwrapper = {
    msp__daily_wrapper : $msp__daily_wrapper,
    msp__form_wrapper  : $msp__form_wrapper,
    msContainer        : $msContainer,
    msp__rep_wrapper   : $msp__rep_wrapper
  };

  var $window = $(window);
  var offset  = $msp_filter.offset();
  var ggTable;
  // init jtable with document.ready 
  // duno why
  $(function() {
  	var oTable,
			sumTable,
			tableWidth = $huntertable.width();

	// Summary Table from summary page
	$SummaryTable.length > 0 && $SummaryTable.each(function() {
		if (!$(this).hasClass("dataTable-custom")) {
			var e = {
				sPaginationType : "full_numbers",
			  sDom : '<"voon"fl>rt<"joon"ip>',
				oLanguage : {
					sSearch     : "<span class='vccc'>Date Filter :</span><select id='wipFilter'></select><span>Quick Search :</span> ",
					sInfo       : "Showing <span>_START_</span> to <span>_END_</span> of <span>_TOTAL_</span> entries",
					sLengthMenu : "_MENU_ <span>entries per page</span>"
				},
          bSort          : false,
          iDisplayLength : 25,
          bDeferRender   : true,
          bProcessing    : true, 
          bServerSide    : true,
		 
          fnRowCallback  : function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            return nRow;
          },
          fnServerParams : function(data) {
            data.push(
              { name : 'month'  , value : $f_month.val()    },
              { name : 'month2' , value : $f_month_2.val()  },
              { name : 'date'   , value : $f_date.val() || 'no' },
			  { name : 'time'   , value : $f_time.val() || 'no' },
              { name : 'product', value : $f_product.val()  },
            //{ name : 'comp'   , value : $f_comp.val()     },     
              { name : 'search' , value : $f_t_search.val() || 'no' }
            );
          },
          fnDrawCallback : function() {
            
          }
        };

			if ($(this).hasClass("dataTable-display")) {
				e.iDisplayLength = 10;
				e.bDeferRender = !0;
			}

			ggTable = $(this).dataTable(e);

			$(".dataTables_filter input").attr("placeholder", "Search here...");
			$(".dataTables_length select").wrap("<div class='input-mini'></div>").chosen({
				disable_search_threshold : 9999999
			});
		}
	}); // end summary table

	// caching DOM and bind event
	$huntertable.each(function(){
		var $this        = $(this),
				$container   = $this.find("div.wip-container"),
				$dummyMain   = $this.find("div.hentai-main"),
				$dummyScroll = $dummyMain.find("div.hentai-scroll"),
				$dummy       = $dummyScroll.find("div.dummy-scroll"),
				$voon        = $container.find("div.wip-slider").find("div.voon"),
				$wipFilter   = $voon.find("select#wipFilter"),
				$joon        = $container.find("div.wip-slider div.joon"),
				$table       = $container.find("div.wip-slider table"),
				$span        = $table.find("span.tabletitle"),
				$datestr     = $container.find("input#wipDate"),
				$dateoption  = $datestr.val(),
				$todaydate   = $container.find("input#todayDate"),
				poch         = $todaydate.val();

		// asyn scroll bar with the original one
		$dummyScroll.css("width",tableWidth + "px");
		$dummy.css("width",( $table.width() + 10) +"px");

		// scroll event
		$container.on("scroll",function(){
			var pixel = $(this).scrollLeft();
			$voon.css("margin-left", pixel + "px");
			$joon.css("margin-left", pixel + "px");
			// update dummy scroll bar
			$dummyScroll.scrollLeft(pixel);
		});

		// when scrolling dummy, update the original one
		$dummyScroll.on("scroll",function(){
			var pixel = $(this).scrollLeft();
			$container.scrollLeft(pixel);
		});

		// when window Resize, update the dummy scroll width
		$(window).resize(function(){
			var width = $(".hunter-table").width();
			$dummyScroll.css("width",width + "px");
		});

		$(window).on("scroll",function(){
			var container = $container.offset().top;
			if($(this).scrollTop() > container ) {
				$dummyMain.addClass("revFixed");
			} else {
				$dummyMain.removeClass("revFixed");
			}
		});

		// filter by date
		$wipFilter.append($dateoption)
		          .change(function(){
								var val = $(this).val();
								if(val === 'all') {
									ggTable.fnFilter("",7);
								} else {
									ggTable.fnFilter(val,7);
								}
							});
		// auto filter after page landing
    // this statement must go before the previous one
		$wipFilter.children("option[value^='" + poch +"']").prop("selected","selected").change();
	}); // end cache dom
	
	


  // redraw otable 
  function ofs() {
    window.ggTable.fnDraw();
  }
  
  
  $f_select_co.on("change", ofs);
  $f_t_refresh.on("click", ofs);
  $f_f_search.on("click", ofs);
  $f_f_reset.on("click", resetform);
  $wrapper__btn.on("click", open_wrapper);
  
  
  function resetform() {
    $f_t_search.val("");
	$f_month.val("All");
	$f_month_2.val("No Filter");
    $f_date.val("");
	 $f_time.val("");
    $f_product.val("");
   // $f_comp.val("");
  }
 }); 
  function open_wrapper(e) {
    e.preventDefault();
    var href            = this.getAttribute("data-href").split("/");
    var $sectionwrapper = sectionwrapper[href[0]];
    var toggle;
    
    
    $sectionwrapper.removeClass("msp-none");
  }
  
  
  
  $msp_open_btn.on("click", function() {
    var isclose = $msp_content.hasClass("msp-none");
    $msp_content.toggleClass("msp-none", (!isclose));
  });
  

})();

this is the image of my template

 

https://drive.google.com/file/d/0B46VQHVMeBTNbFhKMkhlUUE5ZkE/view?usp=sharing

 

What exactly is causing this error??

Can anybody help me?? :unsure:  :unsure:  :unsure: