Javascript 复选框不'；不要在分页后保持检查状态

每当我选中列表页面上的复选框时，保存它，然后转到第eg 2页（使用分页），在那里选中某个内容并保存它。我的第一页上的复选框未选中。我曾考虑过使用AJAX将复选框保存到grails会话，但不知道如何做到这一点——我是JS和视图的初学者。有人能帮我吗？ 以下是列出我的gsp中所有公司和复选框的部分：

 <g:form name="company-list-form" action="listCompany">

    <div>
        <g:textField id="search-field" name="query" value="${params.query}"/>

        <span>
            <g:checkBox id="only-blockades-box" name="onlyBlockades" class="submit-on-change" value="${params.onlyBlockades}" title="Pokaż tylko blokady"/>
            <label for="only-blockades-box">Tylko blokady</label>
        </span>

        <g:actionSubmit value="${message(code: 'default.buttons.search', default: 'Szukaj')}" action="listCompany" class="button_orange"/>
        <g:link action="listCompany" class="button_gray"><g:message code="default.buttons.clean" default="Wyczyść"/></g:link>
    </div>

    <div class="padding-top">
        <table class="table_td company-list-table">
            <tbody>
            <tr class="gray2">
                <th class="first">Id</th>
                <th style="max-width: 100px;">Nazwa</th>
                <th>Id Kontrahenta</th>
                <th title="Dostęp do TPO">TPO</th>
                <th style="width: 20px;" title="Dostawa bezpośrednio do magazynu">Dostawa bezpośrednio</th>
                <th style="width: 20px;" title="Możliwość potwierdzania zamówień">Potwierdzanie zamówień</th>
                <th style="width: 20px;" title="Możliwość importowania awizacji z XLS">Import z&nbsp;Excel</th>
                <th style="width: 20px;" title="Możliwość awizowania zamówionych indeksów">Awizacja zam. indeksów</th>
                <th style="width: 20px;" title="Możliwość awizowania tygodniowego">Awizacja tyg.</th>
                <th style="width: 20px;" title="Dostęp jedynie do awizowania tygodniowego">Tylko awizacja tyg.</th>
                <th title="Limit AGD przypadający na każdą kratkę okna prywatnego">AGD</th>
                <th title="Limit rowerów przypadający na każdą kratkę okna prywatnego">Rowery</th>
                <th>Blokady</th>
                <th class="is-blocked-th">Zablokowany?</th>
            </tr>
            <g:each in="${companyInstanceList}" var="company" status="i">
                <tr class="${(i % 2) == 0 ? 'even' : 'odd'} table_td_gray2 ${i + 1 == companyInstanceList?.size() ? 'last' : ''}">
                    <td class="first" style="text-decoration: underline;">
                        <g:link action="editCompany" id="${company?.id}">${company?.id}</g:link>
                    </td>
                    <td>
                        ${company?.name}
                    </td>
                    <td>
                        ${company?.idKontrahenta}
                    </td>
                    <td>
                        <g:checkBox name="tpoAccess.${company?.id}" id="tpo-access-${company?.id}"
                                    checked="${company?.tpoAccess}"/>
                    </td>
                    <td>
                        <g:checkBox name="directDeliveryAvailable.${company?.id}"
                                    id="direct-delivery-available-${company?.id}"
                                    checked="${company?.directDeliveryAvailable}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToOrderConfirmation.${company?.id}"
                                    id="access-to-order-confirmation-${company?.id}"
                                    checked="${company?.accessToOrderConfirmation}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToXlsImport.${company?.id}"
                                    id="access-to-xls-import-${company?.id}"
                                    checked="${company?.accessToXlsImport}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToOrderedProductsAvisation.${company?.id}"
                                    id="access-to-ordered-products-confirmation-${company?.id}"
                                    checked="${company?.accessToOrderedProductsAvisation}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToLimitedAvisation.${company?.id}"
                                    id="access-to-limited-avisation-${company?.id}"
                                    checked="${company?.accessToLimitedAvisation}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessOnlyToLimitedAvisation.${company?.id}"
                                    id="access-only-to-limited-avisation-${company?.id}"
                                    checked="${company?.accessOnlyToLimitedAvisation}"/>
                    </td>
                    <td>
                        <input type="text" name="agdPrivateWindowLimit.${company?.id}"
                               value="${company?.agdPrivateWindowLimit}"
                               class="shortText" id="agd-private-window-limit-${company?.id}"
                               onchange="validateLimits('agdPrivateWindowLimit.${company?.id}')">
                    </td>
                    <td>
                        <input type="text" name="bicyclePrivateWindowLimit.${company?.id}"
                               value="${company?.bicyclePrivateWindowLimit}"
                               class="shortText" id="bicycle-private-window-limit-${company?.id}"
                               onchange="validateLimits('bicyclePrivateWindowLimit.${company.id}')">
                    </td>
                    <td>
                        <g:link class="button_gray" controller="productGroup" action="list" params="[companyId: company?.id, query: params.query ?: '']">
                            Blokady
                        </g:link>
                    </td>
                    <td>
                        <g:if test="${company?.findBlockades()}">
                            <span title="Dostawca ma aktywne blokady grup towarowych." class="bold large">
                                &#x2713;
                            </span>
                        </g:if>
                    </td>
                </tr>
            </g:each>
            </tbody>
        </table>
    </div>

    <div class="paginateButtons">
        <g:paginate controller="company" action="listCompany" total="${companyInstanceTotal}"
                    params="[query: params.query ?: '']"/>
    </div>

    <div style="float:right;">
        <g:link action="createCompany" class="button_orange">
            <g:message code="default.button.create.label" default="Utwórz"/>
        </g:link>
        <g:actionSubmit action="updateCompanies" name="companyListSubmit" class="button_orange" value="Zapisz"/>
    </div>

</g:form>

蒂尔科·布洛卡迪
身份证件
纳兹瓦
康特拉亨塔酒店
TPO
多斯塔瓦·贝斯波·雷德尼奥
Potwierdzanie zamówień
导入z Excel
Awizacja zam。因德科沃
阿维扎·泰格。
Tylko awizacja tyg。
AGD
吵闹
布洛卡迪
扎布罗科瓦尼？
${company？.id}
${company？.name}
${company？.idKontrahenta}
布洛卡迪
✓；

以下是与该视图关联的javascript文件：

    function validateLimits(name) {
    document.getElementsByName(name)[0].value = document.getElementsByName(name)[0].value.replace(/[A-Za-z!@#$%^&*" "]/g, "");
    var quantity = document.getElementsByName(name)[0].value;
    var toBeAvised = 9999;
    if (quantity.indexOf(',') > -1 || quantity.indexOf('.') > -1 || /*quantity == "" ||*/ isNaN(quantity)) {
        alert("Limit musi być liczbą całkowitą");
        document.getElementsByName(name)[0].value = '';
    } else if (parseInt(quantity) > toBeAvised) {
        alert("Podana liczba jest większa niż maksymalny limit równy " +toBeAvised + ".");
        document.getElementsByName(name)[0].value = '';
    } else if (parseInt(quantity) < 0) {
        alert("Limit musi być liczbą dodatnią!");
        document.getElementsByName(name)[0].value = '';
    }
}

函数validateLimits（名称）{
document.getElementsByName（名称）[0]。value=document.getElementsByName（名称）[0]。value.replace（/[A-Za-z！@$%^&*”“]/g，”）；
var quantity=document.getElementsByName（名称）[0]。值；
toBeAvised变量=9999；
如果（quantity.indexOf（'，'）>-1 | | | quantity.indexOf（'.'）>-1 | |/*quantity==“”| |*/isNaN（quantity））{
警惕（“限制音乐由ćliczbącałkowitą”）；
document.getElementsByName（名称）[0]。值=“”；
}else if（解析输入（数量）>待验证）{
警惕（“Podana liczba开玩笑说，我不知道该怎么做”+“我不知道怎么做”+）；
document.getElementsByName（名称）[0]。值=“”；
}else if（parseInt（数量）<0）{
警惕（“限制音乐由ćliczbądodatnią！”；
document.getElementsByName（名称）[0]。值=“”；
}
}

以下是控制器方法（listCompany）：

def列表公司（最大整数）{
Person=Person.read（springSecurityService.principal.id）
公司公司=个人？公司
params.max=Math.min（max？：25100）
params.offset=params.offset？：0
params.readOnly=true
字符串q=（params.query作为字符串）？.toLowerCase（）？：“”
def query=Company.where{
id！=comp？.id
名称=~“%$q%”| | idKontrahenta as字符串=~“%$q%”
如果（参数onlyBlockades==“开”）{
ProductGroupBlock.findAllByCompanyIsNotNullAndEnabled（true）*.companyId中的id
}
}
List companystancelist=query.List（[max:params.int（“max”），offset:params.int（“offset”），sort:“name”]）
整数计数=query.count（）
if（flash.message）{
params.errors=flash.message
}
[companyInstanceList:companyInstanceList，companyInstanceTotal:count，CompanySave:params.companySaved，errors:params.errors]
}

我如何解决这个问题，使我的复选框在保存后保持选中状态？现在，每当我转到下一页并在那里保存一些复选框时，它们都会被取消选中。

我倾向于在这种情况下使用它们，但这取决于您处理的数据量和处理方式

如果您有一个相对较小的数据集，比如1000行或更少，那么您可以使用一个普通数据表，如果您有更多的数据集，那么您可能需要使用一个简单的数据表

使用DataTable，您可以省去所有Grails分页，给表一个ID，然后用javascript创建表，如：

    <script type="text/javascript">
        $(document).ready( function() {
            $( '#companyListTable' ).DataTable();
        } );
    </script>

$（文档）.ready（函数（）{
$（“#公司列表”）.DataTable（）；
} );

---

所有分页都是用javascript处理的，在表分页中导航时会保留复选框。

原因是您需要构建自己的搜索参数，以便与以下参数一起发送：

---

通过javascript向当前分页添加内容，然后阅读

，我无法改变它的工作方式。我需要使用ajax并使用controller将复选框保存到grails会话。

    <script type="text/javascript">
        $(document).ready( function() {
            $( '#companyListTable' ).DataTable();
        } );
    </script>

<g:paginate total="${instanceTotal}" params="${search}" />

var something = $('#somFIeld').val()