مشاركة كود الصفحة المُنتظرة المُتسلسلة MVC

As shown in the figure:

1. Controller code　

//
    // GET: /AjaxUser/
    shopEntities shop = new shopEntities();
    public ActionResult Index()
    {
      return View();
    }
    public ActionResult loadjson()
    {
      int pageSize = Request["pageSize"] == null ? 10 : int.Parse(Request["pageSize"]);
      int pageIndex = Request["pageIndex"] == null ? 1 : int.Parse(Request["pageIndex"]);
      int totalCount = shop.tbl_admin.Count();
      // gives all the data of userinfo to the front-end and it is in JSON format
      var allorder = shop.tbl_admin.OrderBy(u=>u.id)
        .Skip(pageSize * (pageIndex - 1))
        .Take(pageSize)
        .ToList();
      // accepts an object, internally uses a JavaScript serialization class object to convert it to a string and send it to the front-end
      var data = from u in allorder select new { u.id, u.realname, u.sex};
      string strNav = PageNavHelper.ShowPageNavigate(pageIndex, pageSize, totalCount);
      var result = new {Data=data, NavStr=strNav };
      return Json(result, JsonRequestBehavior.AllowGet);
    }

2،كود الهيكلية　

@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <link href="~/Content/NavPage.css" rel="stylesheet" />
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
  <script src="~/Scripts/jquery.easyui.min.js"></script>
  <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
  <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
  <script type="text/javascript">
    $(function () {
      //页面加载完成后从后如加载当前页数据
      initTable();
    });
  //初始化表格数据
    function initTable(queryData) 
    {
      $.getJSON("/AjaxUser/loadjson",queryData, function (data) {
        var tb = $("#tbList");
        //先移除旧的，添加新的
        $("#tbList tr[type=data]").remove();
        for (var i = 0; i < data.Data.length; i++)
        { 
          var strTr = "<tr type='data'>";
          strTr += "<td>" + data.Data[i].id + "</td>";
          strTr += "<td>" + data.Data[i].realname + "</td>";
          strTr += "<td>" + data.Data[i].sex + "</td>";
          strTr += "<td><a UId='" + data.Data[i].id + "' href='javascript:void(0)'>تعديل</a>" +
            "<a UId='" + data.Data[i].ID + "' href='javascript:void(0)'>حذف</a></td>";
          strTr += "</tr>";
          tb.append(strTr);
        }
        $("#Nav").html(data.NavStr);
        //绑定分页标签的点击事件
        $(".pageLink").click(function () {
          //把页码弹出来
          var strHref = $(this).attr("href");
          var queryStr = strHref.substr(strHref.indexOf('?') + 1);
          //alert(queryStr);
          initTable(queryStr);
          return false;
        });
      });
    }
  </script>
</head>
<body>
  <div>
    <table id="tbList">
      <tr>
        <td>الرقم</td>
        <td>الاسم</td>
        <td>الجنس</td>
        <td>操作</td>
      </tr>
    </table>
    <div id="Nav" class="paginator"> 
    </div>     
  </div>
</body>
</html>

3、分页类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
namespace MvcTest4.Models
{
  public class PageNavHelper
  {
    //主要就是输出分页的超级链接的标签
    //自定义分页Helper扩展
    public static string ShowPageNavigate(int currentPage, int pageSize, int totalCount)
    {
      var redirectTo = HttpContext.Current.Request.Url.AbsolutePath;
      pageSize = pageSize <= 0 ? 3 : pageSize;
      var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
       var output = new StringBuilder();
      if (totalPages > 1)
      {
        //if (currentPage != 1)
        //{\n处理首页连接\n}
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);
        }
        if (currentPage > 1)
        //{\n处理上一页的连接\n}
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize);
        }
        else
        {
          // output.Append("<span class='pageLink'>上一页</span>");
        }
        output.Append(" ");
        int currint = 5;
        for (int i = 0; i <= 10; i++)
        //{\n一共最多显示10个页码，前面5个，后面5个\n}
          if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
          {
            if (currint == i)
            //{\n当前页处理\n}
              //output.Append(string.Format("[{0}]", currentPage));
              output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
            }
            else
            {//معالجة الصفحات العادية
              output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
            }
          }
          output.Append(" ");
        }
        if (currentPage < totalPages)
        {//معالجة رابط الصفحة التالية
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>الصفحة التالية</a> ", redirectTo, currentPage + 1, pageSize);
        }
        else
        {
          //output.Append("<span class='pageLink'>الصفحة التالية</span>");
        }
        output.Append(" ");
        if (currentPage != totalPages)
        {
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>الصفحة الأخيرة</a> ", redirectTo, totalPages, pageSize);
        }
        output.Append(" ");
      }
      output.AppendFormat("الصفحة {0} من {1} صفحة", currentPage, totalPages);//يمكن إضافة هذا الحساب أو عدم إضافته
      return output.ToString();
    }
  }
}

4. صفحة التصفية CSS　

body {
} 
.paginator {
  font: 12px Arial, Helvetica, sans-serif;
  padding: 10px 20px 10px 0;
  margin: 0px;
}
  .paginator a {
    border: solid 1px #ccc;
    color: #0063dc;
    cursor: pointer;
    التفاصيل النصية: لا;
  }
    .paginator a:visited {
      padding: 1px 6px;
      الحدود: خط مستقيم 1px #ddd;
      الخلفية: #fff;
      التفاصيل النصية: لا;
    }
  .paginator .cpb {
    الحدود: 1px خط مستقيم #F50;
    وزن الخط: 700;
    لون النص: #F50;
    لون الخلفية: #ffeee5;
  }
  .paginator a:hover {
    الحدود: خط مستقيم 1px #F50;
    لون النص: #f60;
    التفاصيل النصية: لا;
  }
  .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover {
    التحليق: اليسار;
    الارتفاع: 16px;
    ارتفاع الخط: 16px;
    العرض الأدنى: 10px;
    _عرض: 10px;
    العرض الأيمن: 5px;
    محاذاة النص: منتصف;
    الفضاء الأبيض: لا يُمكن تمريره;
    حجم الخط: 12px;
    عائلة الخط: Arial,SimSun;
    السماح: 0 3px;
  }

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أن تشجعوا دائمًا تعليمات النطق.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية حقوق الطبع والنشر لأصحابها، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت من تلقاء نفسه، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية ذات صلة. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق الطبع والنشر، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال # بـ @ عند إرسال البريد الإلكتروني) لتقديم الشكوى، وقدم الدليل على الشكوى، وسيتم حذف المحتوى المزعوم عن انتهاك حقوق الطبع والنشر على الفور إذا تم التحقق من صحة الشكوى.

تعليميات الأساس

الذكاء الاصطناعي يُحبك