MVC, Bootstrap combined with distributed graph simple implementation of paging _javascript skills

Pagination using Laypage is relatively simple but full-featured, database access using Petapoco,bootstrap is Flatlab template, using MVC repository model.

First, a picture of the effect;

below to see the concrete implementation;

Controller:

Public ActionResult Index ()
{return
View ();
}
<summary>
///Distribution View
///</summary>
///<param name= "Query" ></param>
/// <returns></returns> Public
actionresult list (userquery query)
{
var list = Userrepository.getlist (query);
return View (list);

Repository

Public page<user> getlist (userquery query)
{
var sql = Sql.Builder.Append ("Select Id,username, Password,age,gender,createtime from Users where 1=1 ");
if (!string. Isnullorwhitespace (query. UserName))
{
sql. Append ("and username like @0", "%" + query.) UserName + "%");
}
return page<user> (query). PageIndex, query. PageSize, SQL);

Js:

var users = {lpage:function (query) {var self = this; var url = '/test/list?r= ' + math.random (); $.get (URL, query, fun Ction (h) {//get request distribution view, return HTML, add HTML to the corresponding Div $ (' #datadiv '). html (h); Laypage ({cont: ' pager ', Pages: $ (' #pageco Unt '). Val (), Skin: ' Molv ', Skip:true, Curr:query.pageindex, jump:function (obj, i) {if (!first) {var nquery = $.e
Xtend ({}, query, {pageindex:obj.curr});
Self.lpage (Nquery);
}
}
});
}, ' html ');  }, Load:function () {//Search condition, serialized as Object var query = users.serializeelements ($ (': input ', ' #searchdiv ')); Query.pageindex =
1;
Query.pagesize = 10;
Users.lpage (query); }, Init:function () {users.load (); $ (' #searchbtn '). Click (function () {users.load ();});, serializeelements:function (array) {var items = {}; Array.each (function () {var fieldname = THIS.name; if (fieldname) {var self = $ (this); if (Self.is (': C Heckbox ') | | Self.is (': Radio ')) {if (self.attr (' checked ')) Items[fieldname] = $ (this). val ();} else {var val = self.val (); if (!seLf.is (': Input ')) {val = val | | $.trim (SELF.TEXT ());} if (val && val.length = 0) return;
Items[fieldname] = val;
}
}
});
return items; }
}

HTML:

@{viewbag.title = "Index";
Layout = "~/views/shared/_layout.cshtml"; } @section js{<script src= "~/assets/laypage/laypage.js" ></script> <script src= "~/scripts/ixxiyy-js/
Users.js "></script> <script type=" Text/javascript "> Users.init ();
</script>} <!--main content start--> <section id= "main-content" > <section class= "wrapper" > <!--page start--> <div class= "Row" > <div class= "col-lg-12" > <section class= "Panel" >  

Distribution View:

@{Layout = null;} @model petapoco.page<ixxiyy.core.ixxiyydb.user> <input type= "hidden" @ Model.totalpages "id=" PageCount "/> <table class=" table table-striped table-advance table-hover "> <thead > <tr> <th><i class= "fa fa-bullhorn" ></i>UserName</th> <th class= "Hidden-phone" ><i class= "fa fa-question-circle" ></i>Age</th> <th><i class= "fa Fa-bookmark" ></ i>gender</th> <th><i class= "fa fa-edit" ></i>CreateTime</th> </tr> </thead > <tbody> @if (model.totalitems = 0) {<tr> <td colspan= "4" > No data </td> </tr>} @foreach ( var d in Model.items) {<tr> <td><a href= "#" >@d.UserName</a></td> <td class= " Hidden-phone ">@d.Age</td> <td>@d.Gender</td> <td>@d.createtime.value.tostring (" Yyyy-mm-dd hh:mm ") </td> </tr>} </tbody> </table>

The above is a small set to introduce the MVC, bootstrap combined with distributed map simple to achieve pagination, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!