"MVC" Bootstrap-paginator page plug-in note

Bootstrap-paginator is based on the bootstrap framework and is very simple to use. Official website: http://harttle.github.io/bootstrap-paginator/

In the bootstrap framework, you only need to introduce a bootstrap-paginator.js

<script src= "~/content/js/bootstrap-paginator.min.js" ></script>

Html:

  <id= "logtable">      @html.action ("Getexamlogs")    </ Div > <  ID= "Example"></div>

Getexamlogs a partview that shows the chart:

@using Firecontrol.helper@model IEnumerable<FiReControl. Models.examresult><Tableclass= "Table Table-hover table-bordered">    <TR>        <TD>Exam</TD>        <TD>Paper</TD>        <TD>Name</TD>        <TD>Score</TD>        <TD>Results</TD>        <TD>Unavailable</TD>        <TD>Start time</TD>        <TD>End time</TD>        <TD>Analytical</TD>    </TR>@foreach (var e in Model) {<TR><TD>@e.examname</TD><TD>@e.papername</TD><TD>@e.username</TD><TD>@e.totalscore</TD><TD>@e.score</TD><TD>@CommonHelper. Convertime (E.expensetime)</TD><TD>@e.starttime</TD><TD>@e.endtime</TD>            <TD> <aclass= "Ulink"href= "@Url. Action ("actiondetail "," Exam ", New{examresid=e.id}) ">View parsing</a></TD>        </TR>    }</Table><inputtype= "hidden"ID= "Totalpage"value= "@ViewBag. Totalpage" />

View Code

Js:

<script >    $(function () {        varOptions ={currentpage:1,//Current page TotalPages: $ ("#totalpage"). Val (),//Total pages numberofpages:5,//The number of pages displayed itemtexts:function(Type, page, current) {//modify display textSwitch(type) { Case"First":                    return"First Page";  Case"Prev":                    return"Prev";  Case"Next":                    return"Next Page";  Case"Last":                    return"Last Page";  Case"Page":                    returnpage; }}, onpageclicked:function(event, originalevent, type, page) {//Async page $.post ("/exam/getexamlogs", {page:page,take:2},function(data) {$ ("#logtable"). HTML (data);            });        },                        }; $("#example"). Bootstrappaginator (options); });</script>

Action

  PublicActionResult Getexamlogs (intpage =1,intTake =Ten)        {            //Let 's just take out the grades.            varID =Checkvalid (); varres =_repository. Getexamresultsbyuserid (ID).            ToList (); Viewbag.totalpage= Math.ceiling ((float) Res. Count ()/Take )); varTargets = Res. Skip (Page-1)).            Take (take); returnPartialview (targets); }

Final effect:

Used to always use the jpaginate, interested students can take a shift. First of all, or paginator simple and easy to use.

"MVC" Bootstrap-paginator page plug-in note