在jQuery中重新加载页面后如何应用过滤器？

在应用过滤器时，我在jquery中遇到了一个问题，这是第一次它工作得非常好 但是当我再次重新加载页面或分页时，过滤器不工作。 我需要再次应用过滤器，而不是一次性动态应用。 下面是.jsp和.js的代码片段 请仔细阅读并回复

.jsp

：
.js
$（文档）.ready（函数（）{
var productsApiUrl=CTX_PATH+“/productProgramsDataable”；
var productsTableOpts={
“bProcessing”：正确，
“bStateSave”：正确，
“iDisplayLength”：100，
“aaSorting”：[
[0，“描述”]
],
“sAjaxDataProp”：“，
“sAjaxSource”：productsApiUrl，
“aoColumnDefs”：[
{
“mDataProp”：“在线状态”，
“sClass”：“中心”，
“sClass”：“在线课程”，
“目标”：[13]，
“fnRender”：函数（oObj、sVal）{
var s=oObj.aData[“onlineStatusPid”]；
var pid=oObj.aData[“plannerId”]；
如果（oObj.aData[“programProductStatus”]=“保持”）{
返回“”；
}否则{
if（oObj.aData[“onlineStatus”]=“待定”）{
如果（oObj.aData[“programProductStatus”]！=“保持”）{
返回“”+
'' +
“日期”；
}否则{
返回“”；
}
}else if（oObj.aData[“onlineStatus”]=='NOPRODUCT'| | oObj.aData[“onlineStatus”]==null）{
如果（oObj.aData[“programProductStatus”]！=“保持”）{
返回“”+
'' +
“无产品日期”；
}否则{
返回“”；
}
}否则{
如果（oObj.aData[“programProductStatus”]！=“保持”）{
返回“”+
''+oObj.aData[“在线状态”]+''；
}否则{
返回“”；
}
}
}
},
}
],
“语言”：{
“正在处理”：“正在加载表，请稍候。”，
“sInfoEmpty”：“无需显示的条目”，
“sEmptyTable”：“没有可用的已提交计划表。”
},
“fnRowCallback”：函数（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）({
“背景色”：“绿色”，
“颜色”：“fff”
});
}
if（！$（this）.hasClass（“隐藏列”））{
$（this.find（“[id^=pending]”）。每个（函数（）{
tdCount=tdCount+1；
})    
}                          
})
如果（tdCount==0）{
$（nRow）.attr（“可见”，假）；
}
返回nRow；
},
};
var ttable=$（'#productsTable'）.DataTable（productsTableOpts）；
$（“每个产品的状态类型”）.live（“更改”，功能（）{
var productStatusType=$（“#产品的状态类型”）.val（）；
var productStatusForEachProduct=$（“每个产品的状态类型”）.val（）；
样本（productStatusType、productStatusForEachProduct）；
$.
<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();
            }
        });
    }
}