MVC+jQuery.Ajax melaksanakan penambahan, pemadaman, pengubahsuaian, pertanyaan dan paging_jquery secara tak segerak-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

MVC+jQuery.Ajax melaksanakan penambahan, pemadaman, pengubahsuaian, pertanyaan dan paging_jquery secara tak segerak

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 am 09:00 AM

penomboran Tambah, padam, ubah suai dan semak tak segerak

Contoh dalam artikel ini berkongsi dengan anda kod khusus MVC+jQuery.Ajax pelaksanaan asynchronous penambahan, pemadaman, pengubahsuaian dan halaman untuk rujukan anda. Kandungan khusus adalah seperti berikut

1. Kod lapisan model

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using MvcExamples;
using System.Web.Mvc;

namespace MvcExamples.Web.Models
{
 public class StudentModels
 {
  /// <summary>
  /// 获取学生信息列表
  /// </summary>
  public List<MvcExamples.Model.Student> StudentList { get; set; }
  /// <summary>
  /// 获取教工信息列表
  /// </summary>
  public List<MvcExamples.Model.Teacher> TeacherList { get; set; }
  /// <summary>
  /// 获取学生信息列表(分页)
  /// </summary>
  public PagedList<MvcExamples.Model.Student> GetStudentList { get; set; }
 }
}

Salin selepas log masuk

2. Lihat kod lapisan

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcExamples.Web.Models.StudentModels>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Index
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">

 <script src="http://www.cnblogs.com/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="http://www.cnblogs.com/Scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
 <script src="http://www.cnblogs.com/Scripts/windwUi/jquery-ui-1.8.1.min.js" type="text/javascript"></script>
 <link href="http://www.cnblogs.com/Scripts/windwUi/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 $(function(){
 
  //添加学生信息
  $('#a_add').click(function(){
   $('#window').dialog({ 
     title: "添加学生信息",
     width: 300,
     height: 200,
     modal: true,
     buttons: { 
      "取消": function() {
       $(this).dialog("close"); //当点击取消按钮时，关闭窗口
      }, 
      "添加": function() { 
       //当点击添加按钮时，获取各参数的值
       var sno=$('#sno').val();
       var sname=$('#sname').val();
       var ssex=$('#ssex').val();
       var sbirsthday=$('#sbirthday').val();
       var sclass=$('#sclass').val();
       $.ajax({
       type:'post',
       url:'/Student/AddStudent',//路径为添加方法
       data:'no='+sno+'&name='+sname+'&sex='+ssex+'&birsthday='+sbirsthday+'&sclass='+sclass,//参数的个数和名字要和方法的名字保持一致
       success:function(json)//返回的是Json类型的
        {
         $('#window').dialog("close"); 
         //判断是否成功
         if(json.result=="true")
         {
          $('#btn_close').click();
          alert('恭喜你，修改成功！'); 
         }else{
          alert('抱歉，修改失败！');
         }
        }
       });
      }
      } 
    });
  })
  
  //删除学生信息
  $('.a_delete').click(function(){
   //确认是否删除
   if(confirm("是否删除此条信息？"))
   {
    $.ajax({
     type:'post',
     url:'/Student/DeleteStudent',
     data:'no='+$(this).attr("sno"),//获取当前对象的属性(自定义属性)sno的值，用自定义属性保存相应需要的数据
     sucess:function(json)
      {
       if(json.result=="true")
       {
        alert("恭喜你，已成功删除！");
       }else
       {
        alert("抱歉，删除失败！");
       }
      }
    })
   }
  })
 
  //修改学生信息
  $('.a_update').click(function(){
   var student=$(this);
   $("#sno").attr("value",student.attr("sno"));
   $("#sname").attr("value",student.attr("sname"));
   $("#ssex").attr("value",student.attr("ssex"));
   $("#sbirthday").attr("value",student.attr("sbirthday"));
   $("#sclass").attr("value",student.attr("sclass"));
   
   $('#window').dialog({ 
    title: "修改学生信息",
    width: 300,
    height: 200,
    modal: true,
    buttons: { 
     "取消": function() {
      $(this).dialog("close"); 
     }, 
     "修改": function() { 
      var sno=$('#sno').val();
      var sname=$('#sname').val();
      var ssex=$('#ssex').val();
      var sbirsthday=$('#sbirthday').val();
      var sclass=$('#sclass').val();
      $.ajax({
      type:'post',
      url:'/Student/UpdateStudent',
      data:'no='+sno+'&name='+sname+'&sex='+ssex+'&birsthday='+sbirsthday+'&sclass='+sclass,
      success:function(json)
       {
        $('#window').dialog("close"); 
        if(json.result=="true")
        {
         $('#btn_close').click();
         alert('恭喜你，修改成功！'); 
        }else{
         alert('抱歉，修改失败！');
        }
       }
      });
     }
     } 
    });  
  });
  
 })
 </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <h2>
  MVC 演示</h2>
 <table>
  <thead>
   <tr>
    <td>
     学生表
    </td>
   </tr>
   <tr>
    <td>
     学号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     班级
    </td>
    <td>
     操作
    </td>
   </tr>
  </thead>
  <tbody>
   <%foreach (MvcExamples.Model.Student student in Model.GetStudentList)
    {%>
   <tr>
    <td>
     <%=student.sno %>
    </td>
    <td>
     <%=student.sname %>
    </td>
    <td>
     <%=student.ssex %>
    </td>
    <td>
     <%=student.sbirthday %>
    </td>
    <td>
     <%=student.sclass %>
    </td>
    <td>
    <a href="javascript:void(0);" class="a_update" sno="<%=student.sno %>" sname="<%=student.sname %>" ssex="<%=student.ssex %>"
      sbirthday="<%=student.sbirthday %>" sclass="<%=student.sclass %>">修改</a>
      &nbsp
     <a href="javascript:void(0);" class="a_delete" sno="<%=student.sno %>">删除</a>
    </td>
   </tr>
   <% } %>
  </tbody>
  <tfoot>
   <tr>
    <td>
     全选
    </td>
    <td colspan="5" style="text-align: right;">
     <a href="javascript:void(0);" id="a_add">添加</a>
    </td>
   </tr>
  </tfoot>
 </table>
 <%=Html.MikePager(Model.GetStudentList)%>
 <br />
 <table>
  <thead>
   <tr>
    <td>
     学生表
    </td>
   </tr>
   <tr>
    <td>
     学号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     班级
    </td>
   </tr>
  </thead>
  <tbody>
   <%foreach (MvcExamples.Model.Student student in Model.StudentList)
    {%>
   <tr>
    <td>
     <%=student.sno %>
    </td>
    <td>
     <%=student.sname %>
    </td>
    <td>
     <%=student.ssex %>
    </td>
    <td>
     <%=student.sbirthday %>
    </td>
    <td>
     <%=student.sclass %>
    </td>
   </tr>
   <% } %>
  </tbody>
 </table>
 <br />
 <table>
  <thead>
   <tr>
    <td>
     老师表
    </td>
   </tr>
   <tr>
    <td>
     编号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     职称
    </td>
    <td>
     所在部门
    </td>
   </tr>
  </thead>
  <tbody>
   <%foreach (MvcExamples.Model.Teacher teacher in Model.TeacherList)
    {%>
   <tr>
    <td>
     <%=teacher.tno%>
    </td>
    <td>
     <%=teacher.tname%>
    </td>
    <td>
     <%=teacher.tsex%>
    </td>
    <td>
     <%=teacher.tbirthday%>
    </td>
    <td>
     <%=teacher.prof%>
    </td>
    <td>
     <%=teacher.depart%>
    </td>
   </tr>
   <% } %>
  </tbody>
 </table>
 
 <div id="window" style="display:none;">
 <input type="hidden" id="sno" name="sno" value="" />
 姓名：<input type="text" id="sname" name="sname" /><br />
 性别：<input type="text" id="ssex" name="ssex" /><br />
 生日：<input type="text" id="sbirthday" name="sbirthday" onClick = "WdatePicker()" /><br />
 班级：<input type="text" id="sclass" name="sclass" /><br />
 </div>
</asp:Content>

Salin selepas log masuk

3. Kod lapisan pengawal

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcExamples.Web.Controllers
{
 public class StudentController : Controller
 {
  //
  // GET: /Student/

  MvcExamples.BLL.Student _Student = new MvcExamples.BLL.Student();
  MvcExamples.BLL.Teacher _Teacher = new MvcExamples.BLL.Teacher();
  /// <summary>
  /// 演示
  /// </summary>
  /// <param name="pi"></param>
  /// <param name="sclass"></param>
  /// <returns></returns>
  public ActionResult Index(int&#63; pi, string sclass)
  {
   int PageIndex = pi &#63;&#63; 1;
   int PageSize = 5;
   string sClass = sclass == null &#63; "95031" : sclass;
   MvcExamples.Web.Models.StudentModels _StudentModels = new MvcExamples.Web.Models.StudentModels();
   _StudentModels.StudentList = _Student.GetModelList("sclass=" + sClass);
   _StudentModels.TeacherList = _Teacher.GetModelList("tsex='男'");
   _StudentModels.GetStudentList = new PagedList<MvcExamples.Model.Student>(_Student.GetModelList("sclass=" + sClass).AsQueryable(), PageIndex, PageSize);
   return View(_StudentModels);//返回一个Model
  }
  /// <summary>
  /// 修改学生信息
  /// </summary>
  /// <param name="no"></param>
  /// <param name="name"></param>
  /// <param name="sex"></param>
  /// <param name="birsthday"></param>
  /// <param name="sclass"></param>
  /// <returns></returns>
  public ActionResult UpdateStudent(string no, string name, string sex, string birsthday, string sclass)
  {
   MvcExamples.Model.Student _student = new MvcExamples.Model.Student();
   _student.sno = no;
   _student.sname = name;
   _student.ssex = sex;
   _student.sbirthday = Convert.ToDateTime(birsthday);
   _student.sclass = sclass;

   _Student.Update(_student);   

   JsonResult json = new JsonResult();
   json.Data = new
   {
    result = "true"
   };
   return json;
  }
  /// <summary>
  /// 删除学生信息
  /// </summary>
  /// <param name="no"></param>
  /// <returns></returns>
  public ActionResult DeleteStudent(string no)
  {
   bool IsDelete= _Student.Delete(no);
   JsonResult json = new JsonResult();
   return json;
   if (IsDelete)
   {
    json.Data = new
    {
     result = "true"
    };
   }
   else
   {
    json.Data = new
    {
     result ="false"
    };
   }
   return json;
  }
  /// <summary>
  /// 添加学生信息
  /// </summary>
  /// <param name="no"></param>
  /// <param name="name"></param>
  /// <param name="sex"></param>
  /// <param name="birsthday"></param>
  /// <param name="sclass"></param>
  /// <returns></returns>
  public ActionResult AddStudent(string no, string name, string sex, string birsthday, string sclass)
  {
   MvcExamples.Model.Student _student = new MvcExamples.Model.Student();
   _student.sno = no;
   _student.sname = name;
   _student.ssex = sex;
   _student.sbirthday = Convert.ToDateTime(birsthday);
   _student.sclass = sclass;

   _Student.Add(_student);

   JsonResult json = new JsonResult();
   json.Data = new
   {
    result = "true"
   };
   return json;
  }

  /// <summary>
  /// 提供弹出窗口的数据
  /// </summary>
  /// <param name="id"></param>
  /// <returns></returns>
  public ActionResult WindowData(int id)
  {
   JsonResult json = new JsonResult();
   //这里给json数据(这里只是演示，下面数据是模拟的)
   json.Data = new
   {
    name = "张三",
    sex = "男"
   };
   return json;
  }

 }
}

Salin selepas log masuk

4. Dua kelas tambahan paging PagedList dan MikePagerHtmlExtensions

Kelas tambahan PagedList

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using System.Collections.Specialized;

namespace System.Web.Mvc
{
 public interface IPagedList
 {
  int TotalPage //总页数
  {
   get;
  }

  int TotalCount
  {
   get;
   set;
  }

  int PageIndex
  {
   get;
   set;
  }

  int PageSize
  {
   get;
   set;
  }

  bool IsPreviousPage
  {
   get;
  }

  bool IsNextPage
  {
   get;
  }
 }

 public class PagedList<T> : List<T>, IPagedList
 {
  public PagedList(IQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   if (index == null) { index = 1; }
   if (pageSize == null) { pageSize = 10; }
   this.TotalCount = source.Count();
   this.PageSize = pageSize.Value;
   this.PageIndex = index.Value;
   this.AddRange(source.Skip((index.Value - 1) * pageSize.Value).Take(pageSize.Value));
  }

  public int TotalPage
  {
   get { return (int)System.Math.Ceiling((double)TotalCount / PageSize); }
  }

  public int TotalCount
  {
   get;
   set;
  }
  /// <summary>
/// 
/// </summary>
  public int PageIndex
  {
   get;
   set;
  }

  public int PageSize
  {
   get;
   set;
  }

  public bool IsPreviousPage
  {
   get
   {
    return (PageIndex > 1);
   }
  }

  public bool IsNextPage
  {
   get
   {
    return ((PageIndex) * PageSize) < TotalCount;
   }
  }

 }

 public static class Pagination
 {
  public static PagedList<T> ToPagedList<T>(this IOrderedQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   return new PagedList<T>(source, index, pageSize);
  }

  public static PagedList<T> ToPagedList<T>(this IOrderedQueryable<T> source, int&#63; index)
  {
   return new PagedList<T>(source, index, 10);
  }

  public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   return new PagedList<T>(source, index, pageSize);
  }

  public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int&#63; index)
  {
   return new PagedList<T>(source, index, 10);
  }
 }
}

Salin selepas log masuk

Kelas pembantu MikePagerHtmlExtensions

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using System.Text;

namespace System.Web.Mvc
{
 public static class MikePagerHtmlExtensions
 {
  
  #region MikePager 分页控件

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data)
  {
   string actioinName = html.ViewContext.RouteData.GetRequiredString("action");
   return MikePager<T>(html, data, actioinName);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, object values)
  {
   string actioinName = html.ViewContext.RouteData.GetRequiredString("action");
   return MikePager<T>(html, data, actioinName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action)
  {
   return MikePager<T>(html, data, action, null);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, object values)
  {
   string controllerName = html.ViewContext.RouteData.GetRequiredString("controller");
   return MikePager<T>(html, data, action, controllerName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, string controller, object values)
  {
   return MikePager<T>(html, data, action, controller, new RouteValueDictionary(values));
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, RouteValueDictionary values)
  {
   string actioinName = html.ViewContext.RouteData.GetRequiredString("action");
   return MikePager<T>(html, data, actioinName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, RouteValueDictionary values)
  {
   string controllerName = html.ViewContext.RouteData.GetRequiredString("controller");
   return MikePager<T>(html, data, action, controllerName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, string controller, RouteValueDictionary valuedic)
  {
   int start = (data.PageIndex - 5) >= 1 &#63; (data.PageIndex - 5) : 1;
   int end = (data.TotalPage - start) > 9 &#63; start + 9 : data.TotalPage;

   RouteValueDictionary vs = valuedic == null &#63; new RouteValueDictionary() : valuedic;

   var builder = new StringBuilder();
   builder.AppendFormat("<div class=\"mike_mvc_pager\">");

   if (data.IsPreviousPage)
   {
    vs["pi"] = 1;
    builder.Append(Html.LinkExtensions.ActionLink(html, "首页", action, controller, vs, null));
    builder.Append(" ");
    vs["pi"] = data.PageIndex - 1;
    builder.Append(Html.LinkExtensions.ActionLink(html, "上一页", action, controller, vs, null));
    builder.Append(" ");

   }

   for (int i = start; i <= end; i++) //前后各显示5个数字页码
   {
    vs["pi"] = i;
    if (i == data.PageIndex)
    {
     builder.Append("<font class='thispagethis'>" + i.ToString() + "</font> ");
    }
    else
    {
     builder.Append(" ");

     builder.Append(Html.LinkExtensions.ActionLink(html, i.ToString(), action, controller, vs, null));
    }
   }

   if (data.IsNextPage)
   {
    builder.Append(" ");

    vs["pi"] = data.PageIndex + 1;
    builder.Append(Html.LinkExtensions.ActionLink(html, "下一页", action, controller, vs, null));
    builder.Append(" ");


    vs["pi"] = data.TotalPage;
    builder.Append(Html.LinkExtensions.ActionLink(html, "末页", action, controller, vs, null));


   }
   builder.Append(" 每页" + data.PageSize + "条/共" + data.TotalCount + "条 第" + data.PageIndex + "页/共" + data.TotalPage + "页 </div>");
   return builder.ToString();
  }
  #endregion
 }
}

Salin selepas log masuk

Rendering:

5. Muat turun kod sumber: jQuery.Ajax melaksanakan penambahan, pemadaman, pengubahsuaian dan halaman secara tak segerak

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7612

Tutorial CakePHP

1387

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

136

Tunjukkan Lagi

Related knowledge

Pembangunan PHP: Bagaimana untuk melaksanakan pengisihan data jadual dan fungsi halaman Sep 20, 2023 am 11:28 AM

Pembangunan PHP: Bagaimana untuk melaksanakan fungsi pengisihan data jadual dan halaman Dalam pembangunan web, memproses sejumlah besar data adalah tugas biasa. Untuk jadual yang perlu memaparkan sejumlah besar data, biasanya perlu melaksanakan fungsi pengisihan dan halaman untuk memberikan pengalaman pengguna yang baik dan mengoptimumkan prestasi sistem. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi pengisihan dan halaman data jadual, dan memberikan contoh kod khusus. Fungsi pengisihan melaksanakan fungsi pengisihan dalam jadual, membolehkan pengguna mengisih dalam tertib menaik atau menurun mengikut medan yang berbeza. Berikut ialah borang pelaksanaan

Bagaimanakah bahasa Go melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan pangkalan data? Mar 27, 2024 pm 09:39 PM

Bahasa Go ialah bahasa pengaturcaraan yang cekap, ringkas dan mudah dipelajari Ia digemari oleh pembangun kerana kelebihannya dalam pengaturcaraan serentak dan pengaturcaraan rangkaian. Dalam pembangunan sebenar, operasi pangkalan data adalah bahagian yang sangat diperlukan Artikel ini akan memperkenalkan cara menggunakan bahasa Go untuk melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan pangkalan data. Dalam bahasa Go, kami biasanya menggunakan perpustakaan pihak ketiga untuk mengendalikan pangkalan data, seperti pakej sql yang biasa digunakan, gorm, dsb. Di sini kami mengambil pakej sql sebagai contoh untuk memperkenalkan cara melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan pangkalan data. Andaikan kami menggunakan pangkalan data MySQL.

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Oct 20, 2023 pm 06:19 PM

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Dengan perkembangan Internet, semakin banyak laman web menggunakan jadual untuk memaparkan data. Dalam sesetengah kes di mana jumlah data adalah besar, data perlu dipaparkan dalam halaman untuk meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi halaman jadual dan menyediakan contoh kod khusus. 1. Struktur HTML Pertama, kita perlu menyediakan struktur HTML untuk mengehoskan jadual dan butang paging. Kita boleh menggunakan <tab

Aplikasi Pantas: Analisis Kes Pembangunan Praktikal PHP Asynchronous HTTP Muat Turun Berbilang Fail Sep 12, 2023 pm 01:15 PM

Aplikasi Pantas: Analisis Kes Pembangunan Praktikal PHP Asynchronous HTTP Muat Turun Berbilang Fail Dengan pembangunan Internet, fungsi muat turun fail telah menjadi salah satu keperluan asas bagi banyak laman web dan aplikasi. Untuk senario di mana berbilang fail perlu dimuat turun pada masa yang sama, kaedah muat turun segerak tradisional selalunya tidak cekap dan memakan masa. Atas sebab ini, menggunakan PHP untuk memuat turun berbilang fail secara tidak segerak melalui HTTP telah menjadi penyelesaian yang semakin biasa. Artikel ini akan menganalisis secara terperinci cara menggunakan HTTP tak segerak PHP melalui kes pembangunan sebenar.

Penjelasan terperinci tentang prinsip pemalam paging MyBatis Feb 22, 2024 pm 03:42 PM

MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik yang menyokong operasi pangkalan data berdasarkan XML dan anotasi Ia mudah dan mudah digunakan, dan juga menyediakan mekanisme pemalam yang kaya. Antaranya, pemalam paging adalah salah satu pemalam yang lebih kerap digunakan. Artikel ini akan menyelidiki prinsip pemalam paging MyBatis dan menggambarkannya dengan contoh kod khusus. 1. Prinsip pemalam paging MyBatis sendiri tidak menyediakan fungsi paging asli, tetapi anda boleh menggunakan pemalam untuk melaksanakan pertanyaan paging. Prinsip pemalam paging adalah terutamanya untuk memintas MyBatis

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Oct 24, 2023 pm 01:10 PM

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan komponen antara muka yang ringkas dan cantik serta pengalaman interaktif yang kaya. Semasa pembangunan, kita sering menghadapi situasi di mana kita perlu memaparkan sejumlah besar data dan melakukan paging. Berikut adalah contoh halaman paparan data dengan fungsi paging yang dibangunkan menggunakan Layui. Pertama, kita perlu memperkenalkan fail dan kebergantungan berkaitan Layui. Tambahkan kod berikut pada teg <head>

Amalan komponen Vue: pembangunan komponen halaman Nov 24, 2023 am 08:56 AM

Amalan komponen Vue: Pengenalan kepada pembangunan komponen halaman Dalam aplikasi web, fungsi halaman adalah komponen penting. Komponen paging yang baik hendaklah ringkas dan jelas dalam persembahan, kaya dengan fungsi, dan mudah untuk disepadukan dan digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk membangunkan komponen halaman yang sangat boleh disesuaikan. Kami akan menerangkan secara terperinci cara membangunkan menggunakan komponen Vue melalui contoh kod. Teknologi tindanan Vue.js2.xJavaScript (ES6) HTML5 dan persekitaran pembangunan CSS3

Bagaimana untuk melaksanakan fungsi paging dalam pembangunan teknologi Vue Oct 09, 2023 am 09:06 AM

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Dalam pembangunan teknologi Vue, melaksanakan fungsi paging adalah keperluan biasa. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan fungsi halaman dan menyediakan contoh kod khusus. Sebelum memulakan, kita perlu menyediakan beberapa pengetahuan asas terlebih dahulu. Pertama, kita perlu memahami konsep asas dan sintaks Vue. Kedua, kita perlu tahu cara menggunakan komponen Vue untuk membina aplikasi kita. Sebelum kita mula, kita perlu memasang pemalam paging dalam projek Vue,

See all articles