整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          使用自定義 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)建所需的模型和幫助文件。

          1. 創(chuàng)建一個新模型“Number”。
          2. 右鍵單擊 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 類。

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

          在 PageInfo.cs 中添加代碼:

          1. Page Start 表示當(dāng)前頁面上的第一項。
          2. Page End 表示當(dāng)前頁面的最后一項。
          3. 每頁項目數(shù)表示要在頁面上顯示的項目數(shù)。
          4. Last Page 表示頁數(shù)/最后頁碼。
          5. 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 助手。

          1. 創(chuàng)建自定義 HTML 幫助程序 PageLinks,它呈現(xiàn)頁碼、上一個和下一個鏈接。
          2. 在“Common”文件夾中添加一個新類“PagingHtmlHelpers.cs”。
          3. 在“PagingHtmlHelpers.cs”中添加代碼。
          4. 擴(kuò)展 HtmlHelper 并添加新功能以添加頁面鏈接。
          public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)

          5.取2個參數(shù)

          1. pageInfo:添加頁碼
          2. 委托給函數(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é):表格、圖像編號與視圖功能。

          1

          節(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é)們,今天的課就線上到這里,晚安咯。


          主站蜘蛛池模板: 色欲AV无码一区二区三区| 三上悠亚国产精品一区| 3D动漫精品啪啪一区二区下载| 一区二区三区在线观看免费| 国产伦精品一区二区三区免.费| 国产精品免费视频一区| 国产精品一区二区无线| 视频在线观看一区二区| 国语精品一区二区三区| 久久久久久人妻一区精品| 91在线视频一区| 免费萌白酱国产一区二区| 国产一区二区三精品久久久无广告| 奇米精品一区二区三区在| 无码人妻一区二区三区一| 精品无码成人片一区二区| 美女一区二区三区| 亚州AV综合色区无码一区| 日韩十八禁一区二区久久| 亚洲一区二区电影| 国产精品亚洲专区一区| 无码国产精品一区二区免费3p| 免费高清av一区二区三区| av无码人妻一区二区三区牛牛| 69福利视频一区二区| 无遮挡免费一区二区三区| 久久精品无码一区二区无码| 精品乱码一区二区三区在线| 熟女大屁股白浆一区二区| 精品久久久久久中文字幕一区| 中文字幕亚洲乱码熟女一区二区| 乱码人妻一区二区三区| 日韩免费观看一区| 一区二区三区电影网| 国产精品第一区揄拍| 国产AV午夜精品一区二区入口| 日本一区二区三区精品国产 | 国产丝袜一区二区三区在线观看 | 99精品国产高清一区二区麻豆| 一区二区三区视频网站| 亚洲欧美成人一区二区三区|