javascript - There are four pictures on a page. When turning the page, I want to fix a certain picture and then turn the page. How to achieve this?

Question

The page is like this: four pictures are displayed on one page, and the four pictures are changed together every time the page is turned. Now I want to add a check box in the upper left corner of each picture. When the check box corresponding to the picture is selected When you click on the next page or the previous page, this picture will not be changed, but the unchecked pictures will be changed.
All I can think of now is to record the rownum of the picture in the database when it is selected, and then set it based on this rownum and whether there is currently a fixed picture. pageSize
For example : When the upper left corner image is checked, pageSize=3; when it is not checked, pageSize = 4

The question now is, how to deal with it at the front desk? I developed a program using asp.net, and the asp.net control used to display the front-end control automatically iterates the result. How to control it?

        <asp:DataList ID="DataList1" runat="server" RepeatColumns="2">
        <ItemTemplate>
            <p class="col-lg-12">
                <p class="col-md-3" style="margin-top: 5px">科目代码:</p>
                <p class="col-md-1 kmdm" style="margin-top:5px;margin-left:-10px"><%#Eval("TJ_KM_DM")%></p>
                <p class="col-md-4" style="margin-top: 5px; text-align:right">考试时间:</p>
                <p class="col-md-1 kssj" style="margin-top: 5px;"><%#Eval("KSSJ") %></p>
                <input type="hidden" class="kszkz" value="<%#Eval("KS_ZKZ")%>" />
                <input class="BJSH_JG_QX" type="hidden" value="<%#Eval("BJSH_JG_QX")%>"/>
                    <input class="jddz" type="hidden" value="img/<%#Eval("KSSJ").ToString()+"/"+Eval("TJ_KM_DM").ToString().Trim()+"/"+Eval("KS_ZKZ")+".jpg"%>" />
                <p class="col-md-2" style="margin-left:50px">
                    <input style="margin-bottom: 5px" value="未标记" class="chexSign btn btn-default" type="button" onclick="signCard(this)" />
                </p>
                <img src="../../img/<%#Eval("KSSJ").ToString()+"/"+Eval("TJ_KM_DM").ToString().Trim()+"/"+Eval("KS_ZKZ")+".jpg"%>" alt="Responsive image" class=" well well-lg img-responsive img-thumbnail " />
            </p>
        </ItemTemplate>
    </asp:DataList>

The above code can directly iterate out the effect of the above picture. If you follow the above content, I feel that there is no good way to operate each img
, please ask for guidance.

Answer 1

I provide my personal idea: you need a data stack to save relevant information, mark each one and save it one by one, and then read the data every time you turn the page. If the data can be read, return the data and proceed Related operations, and then continue reading until the reading is completed before using new data.