0
コントローラから表示する項目のリストを返しています。ビュー内の は、ページ内のリストを表示するページングのプラグインjクエリを使用しています。 アクションメソッドは、マイビュー）}このjqueryページ区切り参照（前のページで変更されたスタイルを記憶していないページ付け）
@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;
のように見えます
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);
}
です。
</script>
私はJavaスクリプト機能 "AddStar"と "RemoveStar"関数を書いてメッセージの削除アイコンを追加しました。
問題はページネーションスクリプトによるものです。追加されたスタイルクラスを維持できません。 次のページをクリックしてから前のページをクリックすると以前のページ追加スタイルクラスは削除され、ページは元の形式で表示されます。アドバンス
Imtech.Pager（）とは何ですか？ –
Pagination.jsのどのページャ初期化メード こちらを参照してください。https://www.script-tutorials.com/how-to-create-easy-pagination-with-jquery/ –
新しいページに行くと、新しい要求。コントローラーは、前のビューで追加/削除したクラスを認識していません。データを永続化するには、ajaxを使用してisStaredプロパティを設定し、値を保存するコントローラメソッドを呼び出す必要があります。 –