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

时间:2017-01-05 11:11:44

标签: jquery spring

我在应用过滤器时遇到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();
            }
        });
    }
}

0 个答案:

没有答案