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'):
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:
