使用自定義 HTML Helper在 .NET Core MVC 中實現(xiàn)分頁

本文中，讓我們嘗試構(gòu)建自定義 HTML Hepler以在 .NET Core MVC 應(yīng)用程序中提供分頁。首先對不熟悉的人簡單介紹一下，什么是HTML Helper（助手）：

HTML 助手使開發(fā)人員可以輕松快速地創(chuàng)建 HTML 頁面。
在大多數(shù)情況下，HTML 助手只是一個返回字符串的方法。
MVC 帶有內(nèi)置的 HTML 幫助器，例如 @Html.TextBox()、@Html.CheckBox()、@Html.Label 等。
HTML 助手在 razor 視圖中呈現(xiàn) html 控件。例如，@Html.TextBox() 渲染 <input type="textbox"> 控件，@Html.CheckBox() 渲染 <input type="checkbox"> 控件等。

需求

在Web應(yīng)用程序中，如果要顯示大量記錄，則需要提供分頁。在本文中，我們通過創(chuàng)建自定義 HTML Helper 在 .NET Core MVC 應(yīng)用程序中實現(xiàn)分頁。為了簡單起見，我們只能使用數(shù)字來表示數(shù)據(jù)。

假設(shè)我們需要在多頁中顯示 55 條記錄，每頁有 10 個項目，如上所示。

開始

打開 Visual Studio 2019 > 創(chuàng)建 .NET Core MVC 應(yīng)用程序，如下所示。

項目命名為 HTMLHelpersApp。

選擇 .NET 框架版本。

創(chuàng)建所需的模型和幫助文件。

創(chuàng)建一個新模型“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;
    }
}

現(xiàn)在讓我們添加一個公共類 PageInfo.cs。創(chuàng)建新文件夾 Common 并添加 PageInfo.cs 類。

右鍵單擊項目文件夾并添加一個新文件夾。

在 PageInfo.cs 中添加代碼：

Page Start 表示當(dāng)前頁面上的第一項。
Page End 表示當(dāng)前頁面的最后一項。
每頁項目數(shù)表示要在頁面上顯示的項目數(shù)。
Last Page 表示頁數(shù)/最后頁碼。
Total Items 表示項目的總數(shù)。

根據(jù)總項目數(shù)和每頁項目數(shù)，計算頁面的總頁數(shù)、第一個項目和最后一個項目。

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); }
        }
        
    }
}

現(xiàn)在我們來到最重要的部分：創(chuàng)建自定義 HTML 助手。

創(chuàng)建自定義 HTML 幫助程序 PageLinks，它呈現(xiàn)頁碼、上一個和下一個鏈接。
在“Common”文件夾中添加一個新類“PagingHtmlHelpers.cs”。
在“PagingHtmlHelpers.cs”中添加代碼。
擴(kuò)展 HtmlHelper 并添加新功能以添加頁面鏈接。

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

5.取2個參數(shù)

pageInfo：添加頁碼
委托給函數(shù)：將整數(shù)和字符串作為參數(shù)添加控制器操作方法中所需的參數(shù)

使用標(biāo)簽構(gòu)建器創(chuàng)建錨標(biāo)簽。

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將在每一頁上顯示數(shù)字列表。
PageInfo將捕獲所有頁面詳細(xì)信息，例如每頁上的頁數(shù)、總項目、開始項目和最后一個項目等。

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 文件夾中創(chuàng)建一個新文件夾“HTMLHelper”，并創(chuàng)建一個新視圖“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>

同樣，創(chuàng)建一個新視圖“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”中配置默認(rèn)控制器和操作。

編譯并運(yùn)行應(yīng)用程序，輸入數(shù)字 35。

點擊提交。

你會在底部看到分頁，每頁顯示10個數(shù)字，一共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中的地址參數(shù)
if(page==null||page==""){
page=1;
}
var limit=12;//每頁限制條數(shù)
var page_all="";//總頁數(shù)
$(document).ready(function (){
page_list();
});
function page_list(){
var count=$("#page_count").html();//新聞總數(shù)
var remainder=count%limit;//判斷是否有余數(shù)，有余數(shù)的話，整除后，余數(shù)+1，就是總頁數(shù)；如果余數(shù)為0，即為整除，則整除后的的數(shù)即為總頁數(shù)
if(count<=limit){
//總數(shù)達(dá)不到每頁顯示的條數(shù)，則不顯示頁碼
}else{
//總數(shù)超過一頁，即總數(shù)超過limit規(guī)定的條數(shù)，顯示分頁
//先判斷余數(shù)為0的情況：如果余數(shù)為0，即為整除，則整除后的的數(shù)即為總頁數(shù)
if(remainder==0){
var page_number=count/limit;//總頁碼數(shù)
page_number=parseInt(page_number);//將頁碼數(shù)由字符串類型轉(zhuǎn)換為整形
page_all=page_number;
//如果頁碼數(shù)不超過5，則顯示全部分頁總數(shù)
if(page_number<6){
page=parseInt(page);//將獲取到的頁碼數(shù)轉(zhuǎn)換成整數(shù)
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>");
}
//對頁碼進(jìn)行賦值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是當(dāng)前頁，則給當(dāng)前頁加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是當(dāng)前頁，則去掉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);//將字符串轉(zhuǎn)換為整形
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);//將字符串轉(zhuǎn)換為整形
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);//將字符串轉(zhuǎn)換為整形
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>");
}
//如果余數(shù)不為0，則將整除后的整數(shù)+1，即為總頁碼
else{
var page_number=count/limit;
page_number=parseInt(page_number);
page_number=page_number+1;
page_all=page_number;
//如果頁碼數(shù)不超過5，則顯示全部分頁總數(shù)
if(page_number<6){
page=parseInt(page);//將獲取到的頁碼數(shù)轉(zhuǎn)換成整數(shù)
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>");
}
//對頁碼進(jìn)行賦值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是當(dāng)前頁，則給當(dāng)前頁加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是當(dāng)前頁，則去掉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);//將字符串轉(zhuǎn)換為整形
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);//將字符串轉(zhuǎn)換為整形
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);//將字符串轉(zhuǎn)換為整形
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>");
}
}
}
//跳轉(zhuǎn)的到某一頁
$(document).on("click","#change_page",function(){
var page_num=$("#selcet_page").val();
page_num=parseInt(page_num);//將字符串轉(zhuǎn)換為整形
 //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參數(shù)
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;
}
//輸入框只能輸入數(shù)字
$(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}

啟新旅程

生命由一段又一段的旅程銜接而成，在每段旅程中，都能發(fā)現(xiàn)不一樣的風(fēng)景

Word文檔應(yīng)該這樣玩

前言

Word是非常大眾化的辦公軟件，但是很多用戶并沒有高效率地使用它，主要原因是：

一、大部分用戶沒有熟練駕馭Word所提供的功能

二、不知道Word還有很多不為人知的功能

本套課程共分為四節(jié)課：

第一節(jié)：標(biāo)記與分頁的方法；

第二節(jié)：文檔縱覽、定位、對比技巧；

第三節(jié)：快速格式化文檔內(nèi)容與文檔結(jié)構(gòu)圖認(rèn)知；

第四節(jié)：表格、圖像編號與視圖功能。

第

節(jié)

標(biāo)記與分頁的方法

Number 1

顯示和隱藏標(biāo)記的分析

如上圖中箭頭所指示，這些在Word文檔里面統(tǒng)稱為標(biāo)記，這些標(biāo)記在文檔打印的時候，是打印不出來的（此處可以點擊打印預(yù)覽查看），把Word文檔轉(zhuǎn)化為PDF文檔也是看不到這些標(biāo)記的，但是這些標(biāo)記在文檔里面顯示的很不整齊，在工作中，如果把文檔發(fā)給你的上司，TA看了估計會很不舒服。

這時候我們應(yīng)該怎么辦呢？我們可以這樣做，

如上圖顯示，在Word文檔單擊“開始”選項卡，在段落功能區(qū)里面點擊“顯示/隱藏段落標(biāo)記(布局按鈕)”，Word2003/2007的快捷鍵為Ctrl+Shift+*.

But有些時候，盡管點擊隱藏標(biāo)記按鈕，有些東東還是無法隱藏的，這是因為人工刻意或無意而為之的(比如從網(wǎng)頁上復(fù)制粘貼過來的)，我們把這種統(tǒng)稱為書簽。那如何才能把這些書簽隱藏起來呢？我們用WPS office來演示，點擊“WPS文字→選項→視圖”，在顯示欄里把書簽前面的勾去掉即可。如下圖

我們也可以根據(jù)實際工作需要，單擊上圖中任一或者多個命令按鈕，來操作。在使用中，為了看到某些屬性，方便排版，我們可以把這些標(biāo)記、書簽等顯示出來。如果是發(fā)給對方，不想讓對方看到這些，我們在發(fā)送之前把這些刪掉就可以了。

Number 2

高效產(chǎn)生文檔空白頁

在排版的時候，有時候需要在文檔的某處添加一頁或多頁空白頁，這時候應(yīng)該怎么辦呢？我們可以不斷按“回車鍵”得到空白頁，但是如果需要多頁空白頁，這樣的的效率顯然很慢。這時我們可以把光標(biāo)定在需要分頁的位置上，同時按下Ctrl鍵+回車鍵即可插入空白頁。此時在空白頁上我們會看到一個分頁符(如果看不到分頁符，可以在“WPS文字→選項→視圖→格式標(biāo)記里面的全部“打勾確定即可)，

但在某頁的末尾，如上圖所示光標(biāo)中，同時按下Ctrl鍵+回車鍵，我們會發(fā)現(xiàn)沒有插入空白頁，如下圖：

此時我們只需要再次按下Ctrl鍵+回車鍵即可。第三種方法：我們可以把光標(biāo)停留在頁尾，點擊“插入→空白頁”即可產(chǎn)生空白頁。

Number 3

大標(biāo)題置頂?shù)姆椒ǚ治?/strong>

在文檔排版里面，如果文檔里面分為很多個章節(jié)，為了提高閱讀體驗，我們通常需要把某一章(節(jié))放在頁面的頂端或者是第一行。此時我們只需要①點擊“插入→分頁”即可，②點擊“頁面布局→分隔符→分頁符”亦可，③按Ctrl鍵+回車鍵也是可以的。如圖：

按照以上三種方法操作后，顯示效果如下圖：

好了，同學(xué)們，今天的課就線上到這里，晚安咯。

在線咨詢

上一篇：html大文件傳輸源碼
下一篇：創(chuàng)建頁面并實現(xiàn)無刷新頁面跳轉(zhuǎn)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

推薦閱讀

HTML5的表格使用方法

介紹 Web Face ID，如何使用...

HTML大文件上傳源代碼

云解析dns有什么用？有哪些好用...

百無聊賴學(xué)Python！用Python寫...

河南洛陽首個機(jī)器人移動營業(yè)廳...

HTML5如何實現(xiàn)視頻直播功能

如何使用 CSS 代碼制作一個簡...

HTML網(wǎng)頁編程之按鈕詳解

春山學(xué)：一個臺階引發(fā)的大型劇本殺

html中怎樣獲取當(dāng)前元素的高度？

設(shè)計靈感 - 精美登錄頁設(shè)計案例賞析

將Sublime Text 3打造成強(qiáng)大的Pytho

HTML&CSS案例—咖啡店（定...

大廠如何做設(shè)計系統(tǒng)？組件庫規(guī)...

30 個純 HTML5 實現(xiàn)的游戲

新書揭露肯尼迪家族丑聞，上架...

Github 2024-03-27 C開源項目日報

深度解析各種網(wǎng)站頁面跳轉(zhuǎn)方式...

20多款繪制拓?fù)涞葓D的JavaScript 庫

整合營銷服務(wù)商

使用自定義 HTML Helper在 .NET Core MVC 中實現(xiàn)分頁

需求

開始

添加新控制器

您的項目需求