javascript - 一個頁面有四個圖片，翻頁的時候想固定住某個圖片然後翻頁，如何實現呢?

Question

頁面是這樣：一頁上顯示四張圖片，每次翻頁的時候四張一起更換，現在想在每個圖片的左上角添加一個勾選框，當圖片對應的勾選框被選中時，點選下一頁或上一頁，這張圖片不會更換，而未勾選的圖片會更換。
我現在能想到的就是記錄一下被選中時圖片在資料庫中的rownum，然後根據這rownum以及當前是否有固定住的圖片來設置pageSize
例如：左上角圖片被勾選的時候，pageSize=3；沒有勾選的時候pageSize = 4

現在的問題是，前台要怎麼處理呢？我用asp.net開發的程序，前台展示用的asp.net的控制項自動迭代出來的結果，怎麼控制呢？

        <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>

上面的程式碼，直接可以迭代出上圖的效果，如果按照上面說的內容，我感覺需要操作每個img
沒什麼好的辦法，求大神指導。

Answer 1

我提供我個人的想法：你需要一個數據棧來保存相關的信息，標記一個保存一個，然後再每次翻頁的時候都進行一次數據讀取，如果能讀到數據，則返回數據並進行相關操作，然後繼續讀取，直到讀完後再使用新的資料。