jQuery分页刷新:分页不记得以前页面中更改的样式

jquery pagination refresh: pagining not remembering the changed styles in previous pages

本文关键字：分页 样式 刷新 记得 jQuery      更新时间：2023-09-26

我正在返回要从控制器查看的项目列表。在视图中，我使用jQuery一个用于分页的插件在页面中显示列表。操作方法是

public ActionResult Messages()
{
    List<Message> listMessagesHeader = new List<Message>();
    listMessagesHeader.Add(new Message(){data="hi", isStared=false, MessageId=11});
    listMessagesHeader.Add(new Message(){data="hi", isStared=false, MessageId=0});
    listMessagesHeader.Add(new Message(){data="hi", isStared=false, MessageId=1});
    listMessagesHeader.Add(new Message(){data="hi", isStared=false, MessageId=2});
    listMessagesHeader.Add(new Message(){data="hi", isStared=false, MessageId=3});
    listMessagesHeader.Add(new Message(){data="hi", isStared=false}, MessageId=4);
    listMessagesHeader.Add(new Message(){data="hi", isStared=true}, MessageId=5);
    listMessagesHeader.Add(new Message(){data="hi", isStared=true}, MessageId=6);
    listMessagesHeader.Add(new Message(){data="hi", isStared=false}, MessageId=7);
    listMessagesHeader.Add(new Message(){data="hi", isStared=true}, MessageId=8);
    listMessagesHeader.Add(new Message(){data="hi", isStared=false}, MessageId=9);
    listMessagesHeader.Add(new Message(){data="hi", isStared=false}, MessageId=10);
    return View(listMessagesHeader);
}

我的视图如下所示 

    @model List<Message>
@{
    Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=10">
    <title>Messages</title>
     <script src="@Url.Content("~/Scripts/Pagination.js")"></script>
   </head>
<body>
            <div class="col-xs-12 no-padding">
                <div class="col-xs-12 no-padding table">
                    <table class="table table-bordered table-hover table-responsive table-nowrap" id="content"  title="Inbox Messages">
                        <thead>
                            <tr>
                                <th>From</th>
                                <th>
                                    Subject
                                </th>
                                <th>
                                    <a href='#' title="Click Header to Sort">Date</a>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (Model != null)
                            {
                                foreach (var item in Model)
                                {
                                    <tr >
                                                @if(item.isStared){
                                                <td id="@item.MessageId">
                                                  <i   title="click to change importance" style="border-bottom: none ! important;" class="text-primary editable-click icon-star mark-star"></i>
                                                </td>
                                                }
                                                else{
                                                <td>
                                                 <i  title="click to change importance" style="border-bottom: none ! important;" class="text-primary editable-click icon-star-empty mark-star"></i>
                                                </td>
                                                }
                                                <td>
                                                   @Item.data
                                                </td>

                                            </tr>

                                }
                            }
                        </tbody>
                        <tfoot>
                            <tr id="pagerTwo">
                                <td colspan="3">
                                    <div class="col-xs-4 col-sm-offset-4">
                                        <div class="col-xs-4">
                                            <div class="col-xs-6 pull-right">
                                                <a href="#">  <span class="glyphicon glyphicon-chevron-left prev pull-right"></span></a>
                                            </div>
                                            <div class="col-xs-6 pull-right">
                                                <a href="#">  <span class="glyphicon glyphicon-backward first pull-right"></span></a>
                                            </div>
                                        </div>
                                        <div class="col-xs-4">
                                            <input type="text" disabled class="pagedisplay col-xs-12 text-center" title="pagedisplay" />
                                        </div>
                                        <div class="col-xs-4">
                                            <div class="col-xs-6 pull-left">
                                                <a href="#"> <span class="next glyphicon glyphicon-chevron-right pull-left"></span></a>
                                            </div>
                                            <div class="col-xs-6 pull-right">
                                                <a href="#"> <span class="glyphicon glyphicon-forward last pull-left"></span></a>
                                            </div>
                                        </div>
                                    </div>
                                    <select class="pagesize" style="display: none" title="Pagesize">
                                        <option selected="selected" value="8">8</option>
                                    </select>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="MessageBody" class="col-xs-12 no-padding">
    </div>
</body>
</html>
<script src="@Url.Content("~/Scripts/TableScripts/jquery.tablesorter.Seccurepager.js")" type="text/javascript"></script>
<script type="text/javascript">
    var pager = new Imtech.Pager();
        $(document).ready(function () {
            pager.paragraphsPerPage = 5; // set amount elements per page
            pager.pagingContainer = $('#content'); // set of main container
            pager.paragraphs = $('tr', pager.pagingContainer); // set of required containers
            pager.showPage(1);
        });
</script>
<script type="text/javascript">
  $(document).on('click', '.mark-star', function () {
    $('#' + this.id).removeClass("icon-star-empty");
    $('#' + this.id).addClass("icon-star");
    debugger;
});
  </script>

我编写了java脚本函数"AddStar"和"RemoveStar"函数来添加消息的删除图标。

问题是由于分页脚本我无法保留添加的样式类。当我单击下一页，然后单击上一页时。上一页添加的样式类被删除，页面以原始形式显示。

删除那些 onclick 事件和用户 jquery 点击事件，如 

$(document).on('click','#element',function(){
});

实际上，当您更改页面时，您的html会刷新并且您定义的onclick事件丢失，因此最好使用jquery事件。 这些在任何情况下都有效。

也不建议使用内联 css。使用样式类，以便它可以持久化。

相关文章：