當前位置:首頁 » 網頁前端 » 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>