富贵资源网 Design By www.hznty.com
分页采用laypage使用起来比较简单但是功能很齐全,数据库访问使用petapoco,bootstrap用的是flatlab模版,采用mvc的repository模式。
先来一张效果图;
下面来看具体实现;
Controller:
public ActionResult Index() { return View(); } /// <summary> /// 分布视图 /// </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"htmlcode">@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section js{ <script src="/UploadFiles/2021-04-02/laypage.js">分布视图:
@{ Layout = null; } @model PetaPoco.Page<IxxIyy.Core.IxxIyyDB.User> <input type="hidden" value="@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">暂无数据</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>以上所述是小编给大家介绍的mvc 、bootstrap 结合分布式图简单实现分页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...