当前位置:首页 » 网页前端 » mvc分页前端
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

mvc分页前端

发布时间: 2022-07-17 21:58:06

A. springMVC怎么实现分页显示啊就是这种效果!

1.每次翻页都修改sql,向SQL传入相关参数去数据库实时查出该页的数据并显示。

2.查出数据库某张表的全部数据,再通过在业务逻辑里面进行处理去取得某些数据并显示。

对于数据量并不大的简单的管理系统而言,第一种实现方法相对来说容易使用较少的代码实现分页这一功能,本文也正是为大家介绍这种方法:

一、MyBatis数据表配置文件:

复制代码
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE mapper
3 PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"
4 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
5 <mapper namespace="ec.help..UserDao">
6
7 <resultMap type="ec.help.bean.User" id="userResult" >
8 <id column="id" javaType="string" />
9 <result column="username" javaType="string" />
10 <result column="password" javaType="string" />
11 </resultMap>
12
13 <sql id="userColumn"> id, username, password</sql>
14
15 <select id="getUser" parameterType="map" resultType="ec.help.bean.User" >
16 select * from User where username=#{0} and password=#{1}
17 </select>
18
19 <select id="getAllUser" parameterType="map" resultType="ec.help.bean.User" >
20 select * from User
21 </select>
22
23 <!-- 分页使用SQL -->
24 <select id="getUserByPage" resultType="ec.help.bean.User" >
25 select * from user limit #{0},#{1}
26 </select>
27
28 <insert id="addUser" parameterType="ec.help.bean.User">
29 insert into User(id,username,password) values(#{id},#{username},#{password})
30 </insert>
31
32
33 <delete id="deleteUser" parameterType="String">
34 delete from User where id=#{id}
35 </delete>
36
37 <select id="showUser" parameterType="String" resultType="ec.help.bean.User" >
38 select * from User where id=#{id}
39 </select>
40
41 <update id="updateUser" parameterType="map">
42 update User set username=#{0},password=#{1} where id=#{2}
43 </update>
44 </mapper>
复制代码
SQL中传入的第一个参数为开始的行数,第二个参数为数据条数。

二、Controller中逻辑实现:

复制代码
1 @Value("#{configProperties['userPageSize']}")
2 private String userPageSize;
3
4 @RequestMapping("/listUser.do")
5 public ModelAndView listUser(String page,Model model){
6
7 //每页显示的条数
8 int pageSize = Integer.parseInt(userPageSize);
9
10 List<User> users = new ArrayList<User>();
11 users = this.userService.getAllUser();
12
13 //查到的总用户数
14 model.addAttribute("userNum", users.size());
15
16 //总页数
17 int pageTimes;
18 if(users.size()%pageSize == 0)
19 {
20 pageTimes = users.size()/pageSize;
21 }else
22 {
23 pageTimes = users.size()/pageSize + 1;
24 }
25 model.addAttribute("pageTimes", pageTimes);
26
27 //页面初始的时候page没有值
28 if(null == page)
29 {
30 page = "1";
31 }
32
33 //每页开始的第几条记录
34 int startRow = (Integer.parseInt(page)-1) * pageSize;
35 users = this.userService.getUserByPage(startRow, pageSize);
36
37 model.addAttribute("currentPage", Integer.parseInt(page));
38 model.addAttribute("users", users);
39
40 return new ModelAndView("user/listUser");
41 }
复制代码
三、分页页面文件:

复制代码
1 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
2 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
3 <div class="pagging">
4 <div class="left">共${userNum}条记录</div>
5 <div class="right">
6 <c:if test="${currentPage == 1}">
7 <span class="disabled"><< 前一页</span>
8 </c:if>
9 <c:if test="${currentPage != 1}">
10 <a href="listUser.do?page=${currentPage-1}"><< 前一页</a>
11 </c:if>
12 <c:if test="${currentPage == 1}">
13 <span class="current">1</span>
14 </c:if>
15 <c:if test="${currentPage != 1}">
16 <a href="listUser.do?page=1">1</a>
17 </c:if>
18 <%
19 int pageTimes = (Integer)session.getAttribute("pageTimes");
20 for(int i=1;i<pageTimes;i++)
21 {
22 request.setAttribute("page", i+1);
23 %>
24 <c:if test="${currentPage == page}">
25 <span class="current"><%=i+1%></span>
26 </c:if>
27 <c:if test="${currentPage != page}">
28 <a href="listUser.do?page=<%=i+1%>"><%=i+1%></a>
29 </c:if>
30 <%} %>
31
32 <c:if test="${currentPage == pageTimes}">
33 <span class="disabled">后一页 >></span>
34 </c:if>
35 <c:if test="${currentPage != pageTimes}">
36 <a href="listUser.do?page=${currentPage+1}">后一页 >></a>
37 </c:if>
38 </div>
39 </div>

B. 如何在C# mvc中增加分页功能 为什么我做的分页功能页面下方只有第一页显示哪位大神帮忙看一下

参考这个看看网页链接

另外查询代码少了查询总行数,要用总行数和每页显示的数量,计算出总页数

C. java 前端分页插件能动态实现分页吗 还是要自己写分页语句

分页取数据和显示层bootstrap有什么关系?你从后端获取到数据,然后通过bootstrap的分页组件显示就好了吧.后端mvc框架view层一般会提供默认的分页模板,你可以把bootstrap的分页样式加进去,就可以实现动态分页效果了.

D. 在MVC里面 怎样实现分页

现说真分和假分吧..就像'足球'说的一样 在数据库进行查询直接过滤掉不需要的数据后比如得到一个记录集的第11条道第20条.这个11到20是在数据库中进行查询出来.在代码中得到的rs,rs的记录长度就是10个..吧这10个记录显示到jsp页面上,这种分页方法就是真分..

假分是得到数据集合后在去过滤.这个就是假分..所以足球说的就不确切了..得到的数据集合过滤和显示是可以在jsp页面实现也是可以在javabean中实现的..这种得到数据集合后再去分页的方法是假分.

分页其实就只有真分和假分.怎么实现就在于你真分就要在构在sql语句时去费功夫..而假分就是要在代码中下功夫..侧重点不同.性能不同..如果数据量大的话你的假分页就会把你的系统down掉.真分的行嫩个会很好,但是不容易抽象成一种公用的方法..假分页在数据量不大的情况下还是比较好用.可以抽象成一个公用方法..

就是这些区别..根据你的业务需求来区分吧..MVC只是一个规范..分页是一个方法..两个不搭嘎的...

E. C# mvc项目中@model在前台页面有什么作用

@model就是你前端要显示的内容,即数据模型。你的PagedListPage模型知道当前要显示第几页,每页显示多少条,这样它就会自动生成table下面的页码指示控件。在你的代码中,你的table数据来自viewbag,这其实是不合适的,viewbag是一个来身webform的古老属性,有了model以后,viewbag就很少用了(也不应该用),应当把前端要用到的所有数据封装到model中,也就是相当于MVC中的View所用的Model,在MVVM(和MVC差不多)中也叫ViewModel。

F. 在mvc4.0中怎么用js实现分页技术

MVC项目中有的时候List的条数比较多,需要分页显示,可以用如下的办法:
1、写一个简单PaginatedList 辅助类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public class PaginatedList<T> : List<T> {
public int PageIndex { get; private set; }
public int PageSize { get; private set; }
public int TotalCount { get; private set; }
public int TotalPages { get; private set; }
public PaginatedList(IQueryable<T> source, int pageIndex, int pageSize) {
PageIndex = pageIndex;
PageSize = pageSize;
TotalCount = source.Count();
TotalPages = (int) Math.Ceiling(TotalCount / (double)PageSize);
this.AddRange(source.Skip(PageIndex * PageSize).Take(PageSize));
}
public bool HasPreviousPage {
get {
return (PageIndex > 0);
}
}
public bool HasNextPage {
get {
return (PageIndex+1 < TotalPages);
}
}
}

2、Controller中使用这个PaginatedList 类来返回View:

1
2
3
4
5
6

public ActionResult Index(int? page) {
const int pageSize = 10;
var upcomingDinners = dinnerRepository.FindUpcomingDinners();
var paginatedDinners = new PaginatedList<Dinner>(upcomingDinners, page ?? 0,pageSize);
return View(paginatedDinners);
}

3、View中实现导航链接的Code如下:

1
2
3
4
5
6
7
8

<% if (Model.HasPreviousPage) { %>
<%= Html.RouteLink("<<<", "UpcomingDinners", new { page =
(Model.PageIndex-1) }) %>
<% } %>
<% if (Model.HasNextPage) { %>
<%= Html.RouteLink(">>>", "UpcomingDinners", new { page = (Model.PageIndex +
1) }) %>
<% } %>

G. C# MVC里面分页

ASP.NET MVC中进行分页的方式有多种,但在NuGet上使用最广泛的就是用PagedList、X.PagedList.Mvc进行分页。(原名为:PagedList.Mvc,但是2014年开始,作者将项目名称改名字为“X.PagedList.Mvc”),用这个插件的话会非常便利,大家可以试试,接下来将给大家讲下如何安装这个NuGet插件。
ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(原名为PagedList.Mvc)
1、工具——NuGet 程序包管理器——管理解决方案的 NuGet 程序包

2、 搜索“X.PagedList.Mvc”,并安装、引用

3、\Controllers\UserController.cs 后台代码基本用法:
?

1
2
3
4
5
6
7
8
9
10
11
12

using PagedList;
// GET: User/1
public ActionResult Index(int page = 1)
{
const int pageSize = 10;
//List<User> users = (from u in db.Users
// orderby u.Id descending
// select u).Skip((page - 1) * pageSize).Take(pageSize).ToList();
//return View(users);
var iUsers = db.Users.OrderBy(p => p.Id).ToPagedList(page, pageSize);
return View(iUsers);
}

4、\Views\User\Index.cshtml 前台代码基本用法:
?

1
2
3
4
5
6
7
8

@using PagedList
@using PagedList.Mvc
<table class=“table”>
xxxx
xxxx
xxxx
</table>
@Html.PagedListPager((IPagedList)Model, page => Url.Action(“Index”, new { page }))

5、\App_Start\RouteConfig.cs 配置一下:
?

1
2
3
4
5
6
7
8
9
10
11
12

public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);
routes.MapRoute(
name: “Default”,
url: “{controller}/{action}/{page}”,
defaults: new { controller = “User”, action = “Index”, page = UrlParameter.Optional }
);
}
}

6、效果图:

H. 如何在mvc中增加分页功能

public class DefaultController : ApiController
{
ubll b = new ubll();
[HttpGet]
public fenye Show(int pagesize=2,int pageindex=1,string name="", decimal price = 0)
{
if (pageindex < 1)
{
pageindex = 1;
}
List<pmodel> list = b.Show(name, price);
int page = list.Count;
int count = 0;
if (page % pagesize == 0)
{
count = page / pagesize;
}
else
{
count = page / pagesize + 1;
}
if (pageindex > count)
{
pageindex = count;
}
list = list.Skip((pageindex - 1) * pagesize).Take(pagesize).ToList();
fenye m = new fenye();
m.list = list;
m.pageindex = pageindex;
m.pagecount = page;
m.indexcount = count;
return m;
}
public class fenye
{
public List<pmodel> list { get; set; }
public int pageindex { get; set; }
public int pagecount { get; set; }
public int indexcount { get; set; }
}
public List<pmodel> Show(string name,decimal price)
{
string sql = string.Format("select * from pl p join sp s on p.Sid=s.Sid join mj m on p.Mid=m.Mid where 1=1");
if (!string.IsNullOrEmpty(name))
{
sql += $" and SName='{name}'";
}
if (price != 0)
{
sql += $" or SPrice='{price}'";
}
</table>
<div>
<div>
<a id="hh"></a><a id="mm"></a>
<script>
var userName = _getCookie("userName");
$("#mm").append('<a href="javascript:LoginExit()"> | 退了</a>');
$("#hh").append('<a href="/Default/Index">欢迎' + userName + '登录</a>');
function LoginExit() {
_removeCookie('userId');
_removeCookie('userName');
location.href = '/Default/ss';
}
</script>

</div>
<input type="text" id="name" />
<input type="text" id="price" />
<input type="button" value="查询" onclick="mm()" />

<table class="table table-bordered">

<thead>
<tr>
<td>商品id</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品内容</td>
<td>上架时间</td>
<td>操作</td>

</tr>
</thead>
<tbody id="tt"></tbody>
</table>
<input id="Button1" type="button" onclick="mm(1)" value="首页" />
<input id="Button1" type="button" onclick="mm(pageindex-1)" value="上一页" />
<input id="Button1" type="button" onclick="mm(pageindex+1)" value="下一页" />
<input id="Button1" type="button" onclick="mm(indexcount)" value="尾页" />
第<span id="di"></span>页
共<span id="id"></span>页
</div>

<script>
$(function () {
var indexcount = 0;
var pageindex = 1;
mm(1);
})
function mm(page) {
$.ajax({
url: "
type: "get",
data: { pagesize:2, pageindex: page, name: $("#name").val() },
dataType: "json",
success: function (res) {
$("#di").html(res.pageindex);
$("#id").html(res.indexcount);
pageindex = res.pageindex;
indexcount = res.indexcount;
var trs = "";
$("#tt").empty();
$(res.list).each(function () {
trs += " <tr>"
+ "<td>" + this.Sid + "</td>"
+ "<td>" + this.SName + "</td>"
+ "<td>" + this.SPrice + "</td>"
+ "<td>" + this.nr + "</td>"
+ "<td>" + this.Ptime + "</td>"
+ "<td>" + "<input type='button'value='查看' onclick='ss()'>" + "</td>"
+ "</tr>";

})
$("#tt").append(trs);

}

})
}
<h2>ss</h2>
<script src="~/Scripts/myJs/myCookie.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<a id="_login"></a>
<a id="_exit"></a>
<script>
$(function () {
var userName = _getCookie("userName");
if (userName == null) {
$("#_login").append('<a href="/Default/login">登录查看</a>');
}
else {
alert("登录成功");
location.href = '/Default/Index';
}

})

</script>