使用自定义 HTML Helper在 .NET Core MVC 中实现分页

本文中，让我们尝试构建自定义 HTML Hepler以在 .NET Core MVC 应用程序中提供分页。首先对不熟悉的人简单介绍一下，什么是HTML Helper（助手）：

HTML 助手使开发人员可以轻松快速地创建 HTML 页面。
在大多数情况下，HTML 助手只是一个返回字符串的方法。
MVC 带有内置的 HTML 帮助器，例如 @Html.TextBox()、@Html.CheckBox()、@Html.Label 等。
HTML 助手在 razor 视图中呈现 html 控件。例如，@Html.TextBox() 渲染 <input type="textbox"> 控件，@Html.CheckBox() 渲染 <input type="checkbox"> 控件等。

需求

在Web应用程序中，如果要显示大量记录，则需要提供分页。在本文中，我们通过创建自定义 HTML Helper 在 .NET Core MVC 应用程序中实现分页。为了简单起见，我们只能使用数字来表示数据。

假设我们需要在多页中显示 55 条记录，每页有 10 个项目，如上所示。

开始

打开 Visual Studio 2019 > 创建 .NET Core MVC 应用程序，如下所示。

项目命名为 HTMLHelpersApp。

选择 .NET 框架版本。

创建所需的模型和帮助文件。

创建一个新模型“Number”。
右键单击 Model 文件夹并添加“Number”类。

在 Number.cs 中添加代码。该模型捕获用户输入。它只有一个属性：“InputNumber”。

using System;
using System.ComponentModel.DataAnnotations;


namespace HTMLHelpersApp.Models
{
    public class Number
    {
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
        [RegularExpression(@"^\d+$", ErrorMessage = "Only numbers are allowed. Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber = 1;
    }
}

现在让我们添加一个公共类 PageInfo.cs。创建新文件夹 Common 并添加 PageInfo.cs 类。

右键单击项目文件夹并添加一个新文件夹。

在 PageInfo.cs 中添加代码：

Page Start 表示当前页面上的第一项。
Page End 表示当前页面的最后一项。
每页项目数表示要在页面上显示的项目数。
Last Page 表示页数/最后页码。
Total Items 表示项目的总数。

根据总项目数和每页项目数，计算页面的总页数、第一个项目和最后一个项目。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;


namespace HTMLHelpersApp.Common
{
    public class PageInfo
    {
        public int TotalItems { get; set; }
        public int ItemsPerPage { get; set; }
        public int CurrentPage { get; set; }


        public PageInfo()
        {
            CurrentPage = 1;
        }
        //starting item number in the page
        public int PageStart
        {
            get { return ((CurrentPage - 1) * ItemsPerPage + 1); }
        }
        //last item number in the page
        public int PageEnd
        {
            get
            {
                int currentTotal = (CurrentPage - 1) * ItemsPerPage + ItemsPerPage;
                return (currentTotal < TotalItems ? currentTotal : TotalItems);
            }
        }
        public int LastPage
        {
            get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
        }
        
    }
}

现在我们来到最重要的部分：创建自定义 HTML 助手。

创建自定义 HTML 帮助程序 PageLinks，它呈现页码、上一个和下一个链接。
在“Common”文件夹中添加一个新类“PagingHtmlHelpers.cs”。
在“PagingHtmlHelpers.cs”中添加代码。
扩展 HtmlHelper 并添加新功能以添加页面链接。

public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)

5.取2个参数

pageInfo：添加页码
委托给函数：将整数和字符串作为参数添加控制器操作方法中所需的参数

使用标签构建器创建锚标签。

TagBuilder tag = new TagBuilder("a");
Add attributes
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");

样式也可以用作属性。

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Text;


namespace HTMLHelpersApp.Common
{
    public static class PagingHtmlHelpers
    {
        public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
        {
            StringBuilder pagingTags = new StringBuilder();
            //Prev Page
            if (pageInfo.CurrentPage > 1)
            {
                pagingTags.Append(GetTagString("Prev", PageUrl(pageInfo.CurrentPage - 1)));


            }
            //Page Numbers
            for (int i = 1; i <= pageInfo.LastPage; i++)
            {
                pagingTags.Append(GetTagString(i.ToString(), PageUrl(i)));
            }
            //Next Page
            if (pageInfo.CurrentPage < pageInfo.LastPage)
            {
                pagingTags.Append(GetTagString("Next", PageUrl(pageInfo.CurrentPage + 1)));
            }
            //paging tags
            return new HtmlString(pagingTags.ToString());
        }


        private static string GetTagString(string innerHtml, string hrefValue)
        {
            TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
            tag.MergeAttribute("class","anchorstyle");
            tag.MergeAttribute("href", hrefValue);
            tag.InnerHtml.Append(" "+ innerHtml + "  ");
            using (var sw = new System.IO.StringWriter())
            {
                tag.WriteTo(sw, System.Text.Encodings.Web.HtmlEncoder.Default);
                return sw.ToString();            
            }
        }
    }
}

在“Models”文件夹中添加一个新类“ShowPaging.cs”。

DisplayResult将在每一页上显示数字列表。
PageInfo将捕获所有页面详细信息，例如每页上的页数、总项目、开始项目和最后一个项目等。

using HTMLHelpersApp.Common;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;


namespace HTMLHelpersApp.Models
{
    public class ShowPaging
    {
        
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
        [RegularExpression(@"^\d+$", ErrorMessage = "Only positive numbers are allowed. Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber { get; set; }


        public List<string> DisplayResult { get; set; }


        public PageInfo PageInfo;
    }
}

添加新控制器

添加一个新控制器：“HTMLHelperController”

右键单击控制器文件夹并在上下文菜单中选择控制器。

选择“MVCController-Empty”。

在“HTMLHelperController”中添加代码。

using HTMLHelpersApp.Common;
using HTMLHelpersApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;


namespace HTMLHelpersApp.Controllers
{
    public class HTMLHelperController : Controller
    {
        private const int PAGE_SIZE = 10;
        public IActionResult Number()
        {
            return View();
        }


        public IActionResult ShowPaging(ShowPaging model, int page = 1, int inputNumber = 1)
        {
            if (ModelState.IsValid)
            {
                var displayResult = new List<string>();
                string message;


                //set model.pageinfo
                model.PageInfo = new PageInfo();
                model.PageInfo.CurrentPage = page;
                model.PageInfo.ItemsPerPage = PAGE_SIZE;
                model.PageInfo.TotalItems = inputNumber;


                //Set model.displayresult - numbers list
                for (int count = model.PageInfo.PageStart; count <= model.PageInfo.PageEnd; count++)
                {
                    message = count.ToString();
                    displayResult.Add(message.Trim());
                }
                model.DisplayResult = displayResult;
            }
            //return view model
            return View(model);
        }
    }
}

在 Views 文件夹中创建一个新文件夹“HTMLHelper”，并创建一个新视图“Number.cshtml”。

在“Number.cshtml”中添加代码。

@model HTMLHelpersApp.Models.Number


<h4>Number</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="ShowPaging" method="get">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <input asp-for="InputNumber" class="form-control"/>
            </div>
            <div class="form-group">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

同样，创建一个新视图“ShowPaging.cshtml”。

@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common


<link rel="stylesheet" href ="~/css/anchorstyles.css"/>
<form>
    <h4>Show Paging</h4>
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <dl class="row">
        <dt class="col-sm-2">
            <b>Number: </b> @Html.DisplayFor(model => model.InputNumber)
        </dt>
        <dd>
            <a asp-action="Number">Change Number</a>
        </dd>
    </dl>


    <div>
        @if (Model != null && Model.DisplayResult != null)
        {
            <ul>
                @foreach (var item in Model.DisplayResult)
                {
                    <li>@Html.Raw(item)</li>
                }
            </ul>
            <div>
                @Html.PageLinks(@Model.PageInfo, x => Url.Action("ShowPaging",
                    new { page = x.ToString(), inputNumber = @Model.InputNumber }))
            </div>
        }
    </div>        
 </form>

解决方案资源管理器如下所示：

在“startup.cs”中配置默认控制器和操作。

编译并运行应用程序，输入数字 35。

点击提交。

你会在底部看到分页，每页显示10个数字，一共4页，且每页都一个链接。

JS代码：
/*
* 分页方法
* author:Mr.X
* time:2017/12/27
*/

Request = GetRequest();
var searchType = $("#search_type").val();
var key= Request[searchType];
var keyIndex = key.lastIndexOf('.');
if(keyIndex != -1){
key = key.substring(0, keyIndex)
}
var IFRAME_SRC="http://"+window.location.host+"/search/"+searchType+"/"+key;//初始url
var page=Request['p'];//获取url中的地址参数
if(page==null||page==""){
page=1;
}
var limit=12;//每页限制条数
var page_all="";//总页数
$(document).ready(function (){
page_list();
});
function page_list(){
var count=$("#page_count").html();//新闻总数
var remainder=count%limit;//判断是否有余数，有余数的话，整除后，余数+1，就是总页数；如果余数为0，即为整除，则整除后的的数即为总页数
if(count<=limit){
//总数达不到每页显示的条数，则不显示页码
}else{
//总数超过一页，即总数超过limit规定的条数，显示分页
//先判断余数为0的情况：如果余数为0，即为整除，则整除后的的数即为总页数
if(remainder==0){
var page_number=count/limit;//总页码数
page_number=parseInt(page_number);//将页码数由字符串类型转换为整形
page_all=page_number;
//如果页码数不超过5，则显示全部分页总数
if(page_number<6){
page=parseInt(page);//将获取到的页码数转换成整数
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//尾页
if(page==1){
//如果页码page=1，则隐藏上一页
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
//如果页码page不是1，则显示首页和上一页
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
//对页码进行赋值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是当前页，则给当前页加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是当前页，则去掉active
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
//page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;//下一页
if(page==page_number){
//如果是最后一页，则隐藏下一页功能
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
//如果不是最后一页，则显示最后一页和尾页
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}
//如果页码超过5，则分块显示:点击第一页，显示：1/2/3/4/5/..page_number,点击第二页，显示：1/2/3/4/5/..page_number,点击第三页，显示：1/2/3/4/5/..page_number,点击第四页：显示：1/2/3/4/5/..page_number,点击第五页，显示：1...3/4/5/6/7/..page_number;点击page_number,显示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_number
else{
if(page==1||page==2||page==3||page==4){
page=parseInt(page);//将字符串转换为整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
for(var i=0; i<page_number; i++){
if(i>4){
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
break;
}
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
//$(window.parent.document).find("#tab_13 iframe").attr("src",url);
 //url=$(window.parent.document).find("#tab_13 iframe").attr("src");
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){
page=parseInt(page);//将字符串转换为整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page_number-4; i<page_number+1; i++){
var j=i;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}else{
page=parseInt(page);//将字符串转换为整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page-3; i<page+2; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}
}
$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>页</span>");
$("#page_list").append("<button type='button' id='change_page'>确定</button>");
}
//如果余数不为0，则将整除后的整数+1，即为总页码
else{
var page_number=count/limit;
page_number=parseInt(page_number);
page_number=page_number+1;
page_all=page_number;
//如果页码数不超过5，则显示全部分页总数
if(page_number<6){
page=parseInt(page);//将获取到的页码数转换成整数
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//尾页
if(page==1){
//如果页码page=1，则隐藏上一页
 //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
//如果页码page不是1，则显示首页和上一页
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
//对页码进行赋值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是当前页，则给当前页加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是当前页，则去掉active
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
//page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;//下一页
if(page==page_number){
//如果是最后一页，则隐藏下一页功能
 //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
//如果不是最后一页，则显示最后一页和尾页
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}
//如果页码超过5，则分块显示:点击第一页，显示：1/2/3/4/5/..page_number,点击第二页，显示：1/2/3/4/5/..page_number,点击第三页，显示：1/2/3/4/5/..page_number,点击第四页：显示：1/2/3/4/5/..page_number,点击第五页，显示：1...3/4/5/6/7/..page_number;点击page_number,显示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_number
else{
if(page==1||page==2||page==3||page==4){
page=parseInt(page);//将字符串转换为整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
for(var i=0; i<page_number; i++){
if(i>4){
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
break;
}
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){
page=parseInt(page);//将字符串转换为整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page_number-4; i<page_number+1; i++){
var j=i;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}else{
page=parseInt(page);//将字符串转换为整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页
var url_index=IFRAME_SRC+'/p/'+1;//首页
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page-3; i<page+2; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");
}
}
}
$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>页</span>");
$("#page_list").append("<button type='button' id='change_page'>确定</button>");
}
}
}
//跳转的到某一页
$(document).on("click","#change_page",function(){
var page_num=$("#selcet_page").val();
page_num=parseInt(page_num);//将字符串转换为整形
 //go_text=page_num;
 //alert(page_num);
if(page_num>page_all){
/*$('.success_message').show();
 $("#message_info").html('页码超出范围，请输入正确页码'); */
alert('页码超出范围，请输入正确页码');
return false;
}
if((/^(\+|-)?\d+$/.test( page_num ))&&page_num>0){ 
location.href=IFRAME_SRC+"/p/"+page_num;
}else{ 
/* $('.success_message').show();
 $("#message_info").html('非法页码，请输入正确页码');*/
 /*alert('非法页码，请输入正确页码');*/
layer.msg("非法页码，请重新输入",{time: 2000});
return false;
}
//$("#selcet_page").html(go_text);
});
//获取url参数
function GetRequest() {
var url = location.href; //获取整个url
var theRequest = new Object();
if (url.indexOf("/") != -1) {
var str = url.substr(7);
strs = str.split("/");
for(var i = 0; i < strs.length; i ++) {
if(i==0){
}else{
theRequest[strs[i]]=decodeURIComponent(strs[i+1]);
i=i+1;
}
}
}
return theRequest;
}
//输入框只能输入数字
$(function(){
var bind_name = 'input';
if (navigator.userAgent.indexOf("MSIE") != -1) {
//ie情况下特殊处理
bind_name = 'propertychange';
}
$('#selcet_page').bind(bind_name,function(){
var value = $("#selcet_page").val();
if((/^(\+|-)?\d+$/.test( value ))&&value>0&&value<(page_all+1))
{
}
else{
$("#selcet_page").val("");
return false;
}
});
})HTML代码：<section class="page mt30 mb30">{php}if(isset($count)){{/php}<div id="page_count" style="display:none;">{$count}</div> <div class="dataTables_paginate paging_simple_numbers col-xs-12 marbtm10" id="example_paginate"> <ul class="pagination" id="page_list"> </ul> </div>{php}}{/php}</section>CSS代码：#example_paginate{display: inline-block}.pagination>li{ display: inline-block;margin-right: 10px;padding: 5px 10px;cursor: pointer}.pagination>li>a{color: #fff}.pagination>li.active,.pagination>li:hover,#example_next:hover,#example_previous:hover{ background: #fdc74a;}#change_page:hover{background-color:#f26c1d;cursor: pointer}#selcet_page{ background: #fff;padding: 4px 10px;width: 4em;text-align: center;}#example_next,#example_previous{background: #fff}#example_next>a,#example_previous>a{color: #ff9530}#example_next:hover>a,#change_page:hover>a{color: #fff}#change_page{ background-color: #fdc74a;padding: 4px 10px;color: #fff;height: 29px;display: inline-block;margin-left: 10px;}#goto-page{padding-right: 5px;color: #fff;}#go-page{padding-left: 5px;color: #fff;}.shownum{color: #fff;margin-right: 20px;}.shownum>a{padding: 4px 10px;margin-right: 5px}

启新旅程

生命由一段又一段的旅程衔接而成，在每段旅程中，都能发现不一样的风景

Word文档应该这样玩

前言

Word是非常大众化的办公软件，但是很多用户并没有高效率地使用它，主要原因是：

一、大部分用户没有熟练驾驭Word所提供的功能

二、不知道Word还有很多不为人知的功能

本套课程共分为四节课：

第一节：标记与分页的方法；

第二节：文档纵览、定位、对比技巧；

第三节：快速格式化文档内容与文档结构图认知；

第四节：表格、图像编号与视图功能。

第

节

标记与分页的方法

Number 1

显示和隐藏标记的分析

如上图中箭头所指示，这些在Word文档里面统称为标记，这些标记在文档打印的时候，是打印不出来的（此处可以点击打印预览查看），把Word文档转化为PDF文档也是看不到这些标记的，但是这些标记在文档里面显示的很不整齐，在工作中，如果把文档发给你的上司，TA看了估计会很不舒服。

这时候我们应该怎么办呢？我们可以这样做，

如上图显示，在Word文档单击“开始”选项卡，在段落功能区里面点击“显示/隐藏段落标记(布局按钮)”，Word2003/2007的快捷键为Ctrl+Shift+*.

But有些时候，尽管点击隐藏标记按钮，有些东东还是无法隐藏的，这是因为人工刻意或无意而为之的(比如从网页上复制粘贴过来的)，我们把这种统称为书签。那如何才能把这些书签隐藏起来呢？我们用WPS office来演示，点击“WPS文字→选项→视图”，在显示栏里把书签前面的勾去掉即可。如下图

我们也可以根据实际工作需要，单击上图中任一或者多个命令按钮，来操作。在使用中，为了看到某些属性，方便排版，我们可以把这些标记、书签等显示出来。如果是发给对方，不想让对方看到这些，我们在发送之前把这些删掉就可以了。

Number 2

高效产生文档空白页

在排版的时候，有时候需要在文档的某处添加一页或多页空白页，这时候应该怎么办呢？我们可以不断按“回车键”得到空白页，但是如果需要多页空白页，这样的的效率显然很慢。这时我们可以把光标定在需要分页的位置上，同时按下Ctrl键+回车键即可插入空白页。此时在空白页上我们会看到一个分页符(如果看不到分页符，可以在“WPS文字→选项→视图→格式标记里面的全部“打勾确定即可)，

但在某页的末尾，如上图所示光标中，同时按下Ctrl键+回车键，我们会发现没有插入空白页，如下图：

此时我们只需要再次按下Ctrl键+回车键即可。第三种方法：我们可以把光标停留在页尾，点击“插入→空白页”即可产生空白页。

Number 3

大标题置顶的方法分析

在文档排版里面，如果文档里面分为很多个章节，为了提高阅读体验，我们通常需要把某一章(节)放在页面的顶端或者是第一行。此时我们只需要①点击“插入→分页”即可，②点击“页面布局→分隔符→分页符”亦可，③按Ctrl键+回车键也是可以的。如图：

按照以上三种方法操作后，显示效果如下图：

好了，同学们，今天的课就线上到这里，晚安咯。

在线咨询

上一篇：html大文件传输源码
下一篇：创建页面并实现无刷新页面跳转

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用自定义 HTML Helper在 .NET Core MVC 中实现分页

需求

开始

添加新控制器

您的项目需求