我在应用过滤器时遇到jquery问题,第一次它工作得非常好 但是当我再次重新加载页面或在分页时,过滤器无法正常工作。 我需要再次应用过滤器,只能一次动态应用。 下面是.jsp和.js的片段 请仔细阅读并回复。
的.jsp
<span class="pd_planner_filterbyspan"><spring:message code="Filter_By"/>: </span>
<select id="status_Type_for_products" name="statusType">
<c:choose>
<c:when test="${productStatus eq 'Pending'}">
<option value="Choose One"><spring:message code="chooseOne"/></option>
<option value="All"><spring:message code="All"/></option>
<option selected value="Pending"><spring:message code="Pending"/></option>
<option value="Completed"><spring:message code="Completed"/></option>
<option value="No product"><spring:message code="Noproduct"/></option>
</c:when>
<c:when test="${productStatus eq 'Completed'}">
<option value="Choose One"><spring:message code="chooseOne"/></option>
<option value="All"><spring:message code="All"/></option>
<option value="Pending"><spring:message code="Pending"/></option>
<option selected value="Completed"><spring:message code="Completed"/></option>
<option value="No product"><spring:message code="Noproduct"/></option>
</c:when>
<c:when test="${productStatus eq 'No product'}">
<option value="Choose One"><spring:message code="chooseOne"/></option>
<option value="All"><spring:message code="All"/></option>
<option value="Pending"><spring:message code="Pending"/></option>
<option value="Completed"><spring:message code="Completed"/></option>
<option selected value="No product"><spring:message code="Noproduct"/></option>
</c:when>
</c:choose>
</select>
</div>
<input type="hidden" id="status_Type_for_each_product_id" value="${eachProductStatus}" />
<div class=" " style="float: left; margin:10px;">
<span class="pd_planner_filterbyspan"><spring:message code="FilterByProduct"/></span>
<select id="status_Type_for_each_product" name="statusType">
<c:choose>
<c:when test="${eachProductStatus eq 'onlineCourse'}">
<option value="Choose One"><spring:message code="chooseOne"/></option>
<option value="onlineCourse" selected="selected"><spring:message code="Online_Course"/></option>
<option value="west"><spring:message code="West"/></option>
</c:when>
<c:when test="${eachProductStatus eq 'west'}">
<option value="Choose One"><spring:message code="chooseOne"/></option>
<option value="onlineCourse"><spring:message code="Online_Course"/></option>
<option value="west" selected="selected"><spring:message code="West"/></option>
</c:when>
</c:choose>
</select>
</div>
<table style="width: 100%;display: block; overflow-x:auto; " class="product_list_table" id="productsTable">
<thead>
<tr>
<th ><spring:message code="Online_Course"/></th>
<th ><spring:message code="West"/></th>
</tr>
</thead>
</table>
.js
$(document).ready(function() {
var productsApiUrl = CTX_PATH + "/productProgramsDataTable";
var productsTableOpts = {
"bProcessing": true,
"bStateSave": true,
"iDisplayLength": 100,
"aaSorting": [
[0, "desc"]
],
"sAjaxDataProp": "",
"sAjaxSource": productsApiUrl,
"aoColumnDefs": [
{
"mDataProp": "onlineStatus",
"sClass": "center",
"sClass": "onlineCourse",
"aTargets": [13],
"fnRender": function(oObj, sVal) {
var s = oObj.aData["onlineStatusPid"];
var pid = oObj.aData["plannerId"];
if (oObj.aData["programProductStatus"] == 'HOLD') {
return '';
} else {
if (oObj.aData["onlineStatus"] === 'PENDING') {
if (oObj.aData["programProductStatus"] != 'HOLD') {
return '<input type="checkbox" name="onlineCheck" id="pendingOnlineCheckId' + s + '" value="' + pid + '" checked="checked" class="pendingClass"/>' +
'<input type="button" value="Add" data-id="showcombo" id="showRadioCombo" style="margin-right: .2em ; background: #333;color: #fff;border-radius: 10px; font-size: 11px; width: 40px;border-left-width: 0px"/>' +
'<div style="display: none;" id="radioCombo" > <input type="radio" id="radioidonlineStatus' + s + '" class="' + s + '"/> <label id="labelId' + s + '">Date</label> <a href="javascript:" onclick="complete(\'' + s + '\')"><img border=0 src="' + CTX_PATH + '/resources/images/bullet_check.png"></a> <span id="Cancel_Button" ></span> </div>';
} else {
return '<input type="checkbox" value="' + oObj.aData["plannerId"] + '" id="ProductholdingCheckbox" />';
}
} else if (oObj.aData["onlineStatus"] === 'NOPRODUCT' || oObj.aData["onlineStatus"] == null) {
if (oObj.aData["programProductStatus"] != 'HOLD') {
return '<input type="checkbox" name="onlineCheck" id="onlineCheckId1' + s + '" value="' + pid + '"/>' +
'<input type="button" value="Add" id="showRadioCombo" style="margin-right: .2em ; background: #333;color: #fff;border-radius: 10px; font-size: 11px; width: 40px;border-left-width: 0px;display: none;"/>' +
' <div style="display: none;" id="radioCombo" > <input type="radio" id="radioidonlineStatus' + s + '" class="' + s + '"/> <label id="labelId' + s + '">Date</label> <input type="image" src="' + CTX_PATH + '/resources/images/bullet_check.png" class="bullet_check" onclick="complete1(\'' + pid + '\',"ONLINECOURSE")" /> <span id="Cancel_Button" ></span> </div><span>No Product</span>';
} else {
return '';
}
} else {
if (oObj.aData["programProductStatus"] != 'HOLD') {
return '<input type="checkbox" name="onlineCheck" id="completedOnlineCheckId" class="CompletedwithDate" value="' + pid + '" checked="checked"/>' +
'' + oObj.aData["onlineStatus"] + '';
} else {
return '';
}
}
}
},
}
],
"oLanguage": {
"sProcessing": "Table is loading, please wait.",
"sInfoEmpty": 'No entries to show',
"sEmptyTable": "No Submitted Planners Available."
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).addClass(aData.highLevelStatus);
$(nRow).attr("id", "ProductsId" + iDisplayIndex);
var tdCount=0;
$(nRow).find("td").each(function() {
if ($(this).find('input').attr("class") == 'CompletedwithDate') {
$(this).css({
"background-color": "green",
"color": "#fff"
});
}
if(!$(this).hasClass("hide_column")){
$(this).find("[id ^=pending]").each(function(){
tdCount =tdCount+1;
})
}
})
if(tdCount == 0){
$(nRow).attr("visible",false);
}
return nRow;
},
};
var ttable = $('#productsTable').DataTable(productsTableOpts);
$("#status_Type_for_each_product").live("change", function() {
var productStatusType = $("#status_Type_for_products").val();
var productStatusForEachProduct = $("#status_Type_for_each_product").val();
sample(productStatusType, productStatusForEachProduct);
$.ajax({
type: 'GET',
url: CTX_PATH + '/form/programplanner/update/eachProductStatusType/' + productStatusForEachProduct,
success: function(data) {
}
});
});
$("#status_Type_for_products").live("change", function() {
var productStatusType = $("#status_Type_for_products").val();
var productStatusForEachProduct = $("#status_Type_for_each_product").val();
if (productStatusForEachProduct === 'Choose One' || productStatusType === 'All') {
sample1(productStatusType);
}
if (productStatusForEachProduct != 'Choose One') {
sample(productStatusType, productStatusForEachProduct);
}
$.ajax({
type: 'GET',
url: CTX_PATH + '/form/programplanner/update/productStatusType/' + productStatusType,
success: function(data) {
}
});
});
$("[id ^=onlineCheckId]").live("change", function() {
var programId = $(this).val();
var productName = 'ONLINECOURSE';
var flag = $(this).is(":checked");
if (flag === true) {
$.ajax({
type: 'GET',
datatype: "json",
data: {
productName: productName,
},
url: CTX_PATH + "/forms/programplanner/products/addProductInDetails/" + programId,
success: function(data) {
window.location.reload();
}
});
$(this).next().next().next().hide();
$(this).next().show();
} else {
$(this).next().hide();
$(this).next().next().hide();
}
});
$("[id ^=pendingOnlineCheckId]").live("change", function() {
var programId = $(this).val();
var productName = 'ONLINECOURSE';
var flag = $(this).is(":checked");
if (flag === true) {
$(this).next().show();
}
if (flag === false) {
$.ajax({
type: 'GET',
datatype: "json",
data: {
productName: productName,
},
url: CTX_PATH + "/forms/programplanner/products/deleteProduct/" + programId,
success: function(data) {
window.location.reload();
}
});
$(this).next().hide();
}
});
$("[id ^=completedOnlineCheckId]").live("change", function() {
var flag = $(this).is(":checked");
var productName = 'ONLINECOURSE';
var programId = $(this).val();
if (flag == false) {
$.ajax({
type: 'GET',
datatype: "json",
data: {
productName: productName,
},
url: CTX_PATH + "/forms/programplanner/products/deleteProduct/" + programId,
success: function(data) {
window.location.reload();
}
});
}
});
function sample(productStatusType, productStatusForEachProduct) {
$("[id ^= ProductsId]").hide();
if (productStatusForEachProduct == 'onlineCourse') {
if (productStatusType == 'Completed') {
$(".product_list_table tbody tr td").each(function() {
var statusClass = $(this).find('input').attr("class")
var productClass = $(this).attr("class")
if (statusClass === 'CompletedwithDate' && productClass === 'onlineCourse') {
var row = $(this).closest('tr');
row.show();
}
});
}
if (productStatusType == 'Pending') {
$(".product_list_table tbody tr td").each(function() {
var statusClass = $(this).find('input').attr("class")
var productClass = $(this).attr("class")
if (statusClass === 'pendingClass' && productClass === 'onlineCourse') {
var row = $(this).closest('tr');
row.show();
}
});
}
if (productStatusType == 'No product') {
$(".product_list_table tbody tr td").each(function() {
var statusClass = $(this).find('span').text()
var productClass = $(this).attr("class")
if (statusClass === 'No Product' && productClass === 'onlineCourse') {
var row = $(this).closest('tr');
row.show();
}
});
}
if (productStatusType == 'All') {
$("[id ^= ProductsId]").show();
}
}
}
}
function sample1(productStatusType) {
$("[id ^= ProductsId]").hide();
if (productStatusType == 'All') {
$("[id ^= ProductsId]").show();
}
if (productStatusType == 'Pending') {
$(".product_list_table tbody tr td").each(function() {
if ($(this).find('input').attr("class") == 'pendingClass') {
var row = $(this).closest('tr');
row.show();
}
});
} else if (productStatusType == 'Completed') {
$(".product_list_table tbody tr td").each(function() {
var val = $(this).find('input').attr("class")
if (val == 'CompletedwithDate') {
var row = $(this).closest('tr');
row.show();
}
});
} else if (productStatusType == 'No product') {
$(".product_list_table tbody tr td").each(function() {
var val = $(this).find('span').text();
if (val == 'No Product') {
var row = $(this).closest('tr');
row.show();
}
});
}
}