javascript - jquery pagination refersh (pagining not remembering the changed styles in previous pages ) -
i returning list of items view controller. in view using j query plugin pagination show list in pages. action method is
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); } my view looks
@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 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 change importance" style="border-bottom: none ! important;" class="text-primary editable-click icon-star mark-star"></i> </td> } else{ <td> <i title="click 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> i had written java script functions "addstar" , "removestar" functions add remove icon message.
the problem due pagination script unable persist added style classes. when click next page , on previous page. previous page added styles classes removed , page shown in original form.
thanks in advance
remove onclick event , user jquery click event
$(document).on('click','#element',function(){ }); actually when change page html gets refreshed , defined onclick event lost better use jquery event. work in every case.
and not advised use inline css. use style classes can persist.
Comments
Post a Comment