Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
接上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分頁(yè)功能</title>
<script src="js/jquery-1.11.0.js"></script>
<style>
*{margin:0;padding:0}
#paging{
width:100%;
height:auto;
margin-top:100px;
}
/* 內(nèi)容樣式 */
#paging .paging-content{
width:100%;
height:auto;
text-align: center;
}
#paging .paging-content .paging-content-text{
width:100%;
height:50px;
line-height:50px;
}
/*分頁(yè)樣式*/
#paging .paging-footer{
width:100%;
height:50px;
line-height:50px;
font-size:20px;
color:#fff;
background-color:#d3d3d3;
}
#paging .paging-footer .paging-footer-content{
text-align:center;
margin:auto;
}
#paging .paging-footer-content .content-text{
display:inline-block;
margin-right:15px;
}
#paging .paging-footer-content .content-text button{
color:#fff;
font-size:20px;
background-color: #d3d3d3;
outline: none;
border:none;
cursor:pointer;
}
#paging .paging-footer-content .content-text button:hover{
color:#2d8cf0;
}
#paging .paging-footer-content .content-text .upward{
cursor:no-drop;
}
#paging .paging-footer-content .content-text span{
color:#d3d3d3;
font-size:16px;
background-color:#fff;
border-radius:8px;
padding:1px 15px;
margin:0 10px;
}
#paging .paging-footer-content .content-text input{
width:30px;
font-size:16px;
background-color:#fff;
border-radius:8px;
padding:1px 15px;
margin:0 10px;
outline: none;
border:none;
}
</style>
</head>
<body>
<div id="paging">
<div class="paging-content">
</div>
<div class="paging-footer">
<div class="paging-footer-content">
<div class="content-text">
<button class="upward" disabled="disabled">上一頁(yè)</button>
</div>
<div class="content-text">
第<span class="nowPage">1</span>頁(yè)
</div>
<div class="content-text">
<button class="down">下一頁(yè)</button>
</div>
<div class="content-text">
跳轉(zhuǎn)<input class="pageVal" type="text" value="1" onKeyUp="value=value.replace(/\D/g,'')"/>頁(yè)
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//頁(yè)面加載初始化數(shù)據(jù)
var page = 1; //請(qǐng)求頁(yè)數(shù)
var pageSize = 10; //每頁(yè)返回?cái)?shù)據(jù)條數(shù)
getData();
function getData(){
$.ajax({
type : 'GET',
url : 'datas.json',
data : {
page : page,
pageSize : pageSize
},
dataType: "json",
success: function(data){
//var res = data.data;
console.log(data);
$('#paging .paging-content').html(''); //每次請(qǐng)求清空原來(lái)的數(shù)據(jù)
$.each(res,function(index,res){
pagingContent =
'<div class="paging-content-text">'+res.bumenname+'</div>'
//將請(qǐng)求的數(shù)據(jù)append到頁(yè)面上
$('#paging .paging-content').append(pagingContent);
})
}
});
}
//分頁(yè)
var upwardPage = $(' #paging .content-text .upward'); //上一頁(yè)
var downPage = $(' #paging .content-text .down'); //下一頁(yè)
var nowPage = $(' #paging .content-text .nowPage'); //當(dāng)前頁(yè)數(shù)
var nowPageNum = Number(nowPage.html());
var pageVal = $(' #paging .content-text .pageVal'); //跳轉(zhuǎn)頁(yè)數(shù)
//上一頁(yè)
upwardPage.click(function(){
nowPageNum = page;
if(nowPageNum > 1){
nowPageNum --;
}else{
nowPageNum == 1;
}
if(nowPageNum == 1){
upwardPage.attr('disabled',true);
upwardPage.css('cursor','no-drop');
nowPage.html(1);
pageVal.val(1);
page = nowPageNum;
getData();
}
else{
nowPage.html(nowPageNum);
pageVal.val(nowPageNum);
page = nowPageNum;
getData();
}
})
//下一頁(yè)
downPage.click(function(){
nowPageNum = page;
upwardPage.attr('disabled',false);
upwardPage.css('cursor','pointer');
nowPageNum++;
nowPage.html(nowPageNum);
pageVal.val(nowPageNum);
page = nowPageNum;
getData();
})
//跳轉(zhuǎn)
//失去焦點(diǎn)
pageVal.blur(function(){
var pageval = Number(pageVal.val());
var nowpage = Number(nowPage.html());
//如果失去焦點(diǎn)前后的值一樣,不進(jìn)行數(shù)據(jù)請(qǐng)求
if(pageval != nowpage){
//小于1跳轉(zhuǎn)第一頁(yè)
if(pageval > 1){
upwardPage.attr('disabled',false);
upwardPage.css('cursor','pointer');
nowPage.html(pageval);
page = pageval;
getData();
}else{
upwardPage.attr('disabled',true);
upwardPage.css('cursor','no-drop');
nowPage.html(1);
pageVal.val(1);
page = 1;
getData();
}
}
})
//回車
pageVal.keyup(function(event){
if(event.keyCode == 13){
var pageval = Number(pageVal.val());
var nowpage = Number(nowPage.html());
//如果失去焦點(diǎn)前后的值一樣,不進(jìn)行數(shù)據(jù)請(qǐng)求
if(pageval != nowpage){
//小于1跳轉(zhuǎn)第一頁(yè)
if(pageval > 1){
upwardPage.attr('disabled',false);
upwardPage.css('cursor','pointer');
nowPage.html(pageval);
page = pageval;
getData();
}else{
upwardPage.attr('disabled',true);
upwardPage.css('cursor','no-drop');
nowPage.html(1);
pageVal.val(1);
page = 1;
getData();
}
}
}
})
})
</script>
</body>
</html>
效果圖:(內(nèi)容倒是后換個(gè)地址就可以顯示)
水平有限,歡迎指教。
本文中,讓我們嘗試構(gòu)建自定義 HTML Hepler以在 .NET Core MVC 應(yīng)用程序中提供分頁(yè)。首先對(duì)不熟悉的人簡(jiǎn)單介紹一下,什么是HTML Helper(助手):
在Web應(yīng)用程序中,如果要顯示大量記錄,則需要提供分頁(yè)。在本文中,我們通過(guò)創(chuàng)建自定義 HTML Helper 在 .NET Core MVC 應(yīng)用程序中實(shí)現(xiàn)分頁(yè)。為了簡(jiǎn)單起見(jiàn),我們只能使用數(shù)字來(lái)表示數(shù)據(jù)。
假設(shè)我們需要在多頁(yè)中顯示 55 條記錄,每頁(yè)有 10 個(gè)項(xiàng)目,如上所示。
打開(kāi) Visual Studio 2019 > 創(chuàng)建 .NET Core MVC 應(yīng)用程序,如下所示。
項(xiàng)目命名為 HTMLHelpersApp。
選擇 .NET 框架版本。
創(chuàng)建所需的模型和幫助文件。
在 Number.cs 中添加代碼。該模型捕獲用戶輸入。它只有一個(gè)屬性:“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)在讓我們添加一個(gè)公共類 PageInfo.cs。創(chuàng)建新文件夾 Common 并添加 PageInfo.cs 類。
在 PageInfo.cs 中添加代碼:
根據(jù)總項(xiàng)目數(shù)和每頁(yè)項(xiàng)目數(shù),計(jì)算頁(yè)面的總頁(yè)數(shù)、第一個(gè)項(xiàng)目和最后一個(gè)項(xiàng)目。
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)在我們來(lái)到最重要的部分:創(chuàng)建自定義 HTML 助手。
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
5.取2個(gè)參數(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”文件夾中添加一個(gè)新類“ShowPaging.cs”。
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;
}
}
添加一個(gè)新控制器:“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)建一個(gè)新文件夾“HTMLHelper”,并創(chuàng)建一個(gè)新視圖“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)建一個(gè)新視圖“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。
點(diǎn)擊提交。
你會(huì)在底部看到分頁(yè),每頁(yè)顯示10個(gè)數(shù)字,一共4頁(yè),且每頁(yè)都一個(gè)鏈接。
ordpress主題trans的首頁(yè)模板的左側(cè)文章列表,在上一節(jié)中,我們已經(jīng)做了修改,實(shí)現(xiàn)了從wordpress的數(shù)據(jù)庫(kù)中調(diào)用。但是,wordpress網(wǎng)站的文章肯定有很多很多,這時(shí),如果把所有的文章都顯示在同一個(gè)頁(yè)面,這好像不太好,也不利于用戶的瀏覽。所以,wordpress網(wǎng)站的后臺(tái)可以設(shè)置每個(gè)頁(yè)面顯示多少篇文章,默認(rèn)情況下,是每個(gè)頁(yè)面顯示10篇,剩下的文章列表,會(huì)以分頁(yè)的形式顯示。
在trans主題的靜態(tài)模板中,我們沒(méi)有做分頁(yè)效果,所以,在本節(jié)中,我們不僅要添加分頁(yè)的功能,還要添加分頁(yè)的展示效果的CSS樣式。那么,怎樣給trans主題首頁(yè)左側(cè)的文章列表添加分頁(yè)效果呢?
第一步:添加分頁(yè)按鈕的父標(biāo)簽。
為了整個(gè)頁(yè)面的布局合理,我們給分頁(yè)按鈕添加一個(gè)父標(biāo)簽,代碼如下:
< div class="left_page"></div>
第二步:添加分頁(yè)代碼。
從wordpress4.1版本開(kāi)始,wordpress就為我們提供了一個(gè)非常好用的分頁(yè)函數(shù)——the_posts_pagination(),而不再需要wordpress主題開(kāi)發(fā)者們自己創(chuàng)建自定義的分頁(yè)函數(shù)了,這也就是那么多人都在使用wordpress做網(wǎng)站的原因吧。
好了,不多說(shuō),我們直接在上面添加的父標(biāo)簽里添加如下PHP代碼:
<?php
the_posts_pagination( array(
'mid_size' => 3, //當(dāng)前頁(yè)碼數(shù)的 兩邊 顯示3個(gè)頁(yè)碼。
'prev_text' =>'<', //上一頁(yè)
'next_text' =>'>', //下一南
) );
?>
從上面的代碼中,我們可以看出,the_posts_pagination()函數(shù)只有一個(gè)參數(shù),這個(gè)參數(shù)是一個(gè)array數(shù)組。這個(gè)數(shù)組里可以包含有多個(gè)元素,這些元素的值我們都是可以修改的,如:我們可以把
'prev_text' =>'<' 改成 'prev_text' =>'上一頁(yè)', 'next_text' =>'>' 改成 'next_text' =>'下一頁(yè)'。
這時(shí),我們?cè)倏磘rans主題首頁(yè)的左側(cè)底部,就可以看到分頁(yè)數(shù)了,就是不太美觀,如下圖:
第三步:給分頁(yè)添加css樣式。
從上圖中,我們可以看出,這個(gè)分頁(yè)按鈕實(shí)在是太難看了。為了讓它變得美觀,我們需要為它添加CSS樣式代碼。代碼如下:
/*分頁(yè)*/
.left_page{ float:left; padding:15px; background: #fff; width:100%; box-sizing:border-box; }
.left_page h2{ display:none; }
.left_page .nav-links a{ display:inline-block; padding:2px 5px; border:1px solid #ccc; }
.left_page .nav-links .current{ display:inline-block; padding:2px 5px; border:1px solid #ccc; background:#3571cc; color:#fff; }
.left_page .nav-links a:hover{ background:#3571cc; color:#fff; }
添加上這些CSS樣式代碼后,我們?cè)俚絫rans主題網(wǎng)站的首頁(yè)看一下,這時(shí)的分頁(yè)按鈕就好看多了,如下圖:
?當(dāng)前頁(yè)面的頁(yè)碼顯示為藍(lán)底白字,鼠標(biāo)光標(biāo)移到哪真頁(yè)碼上,這個(gè)頁(yè)碼也會(huì)顯示為藍(lán)底白字,這樣,在用戶瀏覽時(shí),會(huì)更加的友好。
好了,通過(guò)上面的操作,我們?yōu)閣ordpress主題trans的首頁(yè)左側(cè)添加了文章列表的分頁(yè)效果。不做的時(shí)候,是不是覺(jué)得很難?但是,一旦做起來(lái),是不是又覺(jué)得特別的簡(jiǎn)單?就是這樣的感覺(jué)了,使用wordpress的好處,就在這里了,它很多事情都為我們想了,我們只需要把它拿來(lái)用就行了 。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。