BootStrap mvcpager分页样式(get请求,刷新页面)
使用方法:
先把mvcpager.dll引用加入mvc项目中。
前台代码
前台：
@{
Layout = null;
}
@using Webdiyer.WebControls.Mvc
@model PagedList<string>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/css_pager.css" rel="stylesheet" />
</head>
<body>
<div>
@foreach (var item in Model)
{
@item<br />
}
</div>
<div style="text-align:center;">
@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "ul", PrevPageText = "上页", NextPageText = "下页", FirstPageText = "首页", LastPageText = "尾页", CssClass = "pagination", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", PagerItemWrapperFormatString = "<li>{0}</li>" }, new { id = "bootstrappager", @class = "pagination" })
<!-- @class 可为pagination或pager 样式可自行修改样式表-->
</div>
</body>
</html>
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Webdiyer.WebControls.Mvc;
namespace MvcApplication6.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index(int pageIndex=1, int pageSize=2)
{
List<string> list = new List<string>(){
"a",
"b",
"c",
"d"
};
return View(list.ToPagedList(pageIndex, pageSize));
}
}
}
@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "ul", PrevPageText = "上页", NextPageText = "下页", FirstPageText = "首页", LastPageText = "尾页", CssClass = "pagination", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", PagerItemWrapperFormatString = "<li>{0}</li>" }, new { id = "bootstrappager", @class = "pagination" })
样式更改:class为pager或pagination
如图：
样式文件：
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
.pagination > li {
display: inline;
}
.pagination > li > a, .pagination > li > span {
background-color: #fff;
border: 1px solid #ddd;
color: #337ab7;
float: left;
line-height: 1.42857;
margin-left: -1px;
padding: 6px 12px;
position: relative;
text-decoration: none;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
background-color: #eee;
border-color: #ddd;
color: #23527c;
z-index: 3;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
background-color: #337ab7;
border-color: #337ab7;
color: #fff;
cursor: default;
z-index: 2;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
background-color: #fff;
border-color: #ddd;
color: #777;
cursor: not-allowed;
}
/*.pagination-lg > li > a, .pagination-lg > li > span {
font-size: 18px;
line-height: 1.33333;
padding: 10px 16px;
}
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
.pagination-sm > li > a, .pagination-sm > li > span {
font-size: 12px;
line-height: 1.5;
padding: 5px 10px;
}
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}*/
.pager {
list-style: outside none none;
margin: 20px 0;
padding-left: 0;
text-align: center;
}
.pager li {
display: inline;
}
.pager li > a, .pager li > span {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
display: inline-block;
padding: 5px 14px;
text-decoration: none;
}
.pager li > a:hover, .pager li > a:focus {
background-color: #eee;
text-decoration: none;
}
.pager .next > a, .pager .next > span {
float: right;
}
.pager .previous > a, .pager .previous > span {
float: left;
}
.pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span {
background-color: #fff;
color: #777;
cursor: not-allowed;
}
.pager > .active > a, .pager > .active > span, .pager > .active > a:hover, .pager > .active > span:hover, .pager > .active > a:focus, .pager > .active > span:focus {
background-color: #eee;
cursor: default;
z-index: 2;
}
以上所述是小编给大家介绍的BootStrap mvcpager分页样式(get请求,刷新页面)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
问题内容： 好的，我有一个仅包含的简单表格。当我们点击submit（通过ajax存储）时，在文本字段中写入的数据将存储在DB中。Ajax可以正常工作并提交数据，但是，页面会自动刷新，并且URL包含输入字段的内容。 我的表格： 阿贾克斯：- PHP的：- 结果显示在后，页面将刷新，URL变为： -chat.php？message = 454545＆submit_message = 为什么要刷新页面？
-
这是一个简单的html页面，我正在使用以下功能更改按钮单击时的样式表（在深色和浅色主题之间切换）： 此外，当前主题值保存在浏览器localstorage中，该存储在jquery ready函数外部进行检查，以在加载页面之前（每当用户返回站点时）设置样式表。 问题是（在Chrome和firefox上）当用户切换到深色主题并刷新页面时，样式会消失一秒钟，然后再回来。如果用户切换回light/defau
-
问题内容： 我在本周遇到的一种情况：我们有一个jQuery Ajax调用，该调用返回到服务器以获取数据 是页面上静态方法的链接（比如）。 这行得通，没问题。 一位同事试图用类型为“ GET”的电话代替此呼叫。它坏了，我不得不修复它。最终，我回到了POST，因为我们需要快速修复，但是它一直困扰着我，因为在这种情况下，从语义上来说GET更“正确”。 据我了解，jQuery将数据中的对象转换为查询字符串
-
本文向大家介绍jquery分页插件jquery.pagination.js实现无刷新分页，包括了jquery分页插件jquery.pagination.js实现无刷新分页的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码，供大家参考，具体内容如下 1.使用插件为 jquery.pagination.js ，如果没有这个js文件的话，我可以给发
-
问题内容： 我有一个附加到Java程序的基本html文件。每当刷新页面时，此java程序都会更新HTML文件的部分内容。我只希望在每个时间间隔后刷新页面的该部分。我可以将要刷新的部分放在中，但是我不确定如何仅刷新该内容。任何帮助，将不胜感激。谢谢。 问题答案： 为此使用Ajax。 构建一个函数，该函数将通过ajax获取当前页面，而不是整个页面，仅从服务器中获取有问题的div。然后（再次通过jQue
-
问题内容： 我有一个文件，其中我在页面顶部显示外部页面（使用iframe），其他部分是写在文件中的html代码的输出。 HTML代码如下所示： 现在，我想以编程方式刷新页面而不刷新。 我的问题是我可以不刷新页面就刷新页面吗？ 答案/提示将不胜感激。 问题答案： 该嵌在主HMTL页面（或在JSP）。因此，如果刷新页面，则肯定会再次加载iframe。 为了避免这种情况，我可以考虑以下两种选择： 使用A