تحقيق نمط الصفحة التالية باستخدام jQuery ligerUI

أثناء التدريب في الشركة رأيت أن إطار العمل يستخدم ligerUI grid للتصفح، وأشعر أن ذلك مفيد جدًا، وتمكنت من تحقيق ذلك بنفسي وأجريت سجلاً به　

ببساطة، liger grid هو إرسال البيانات المعدة مسبقًا إلى الوجهة المحددة لطلب البيانات، وحصولك على البيانات بعد ذلك، عرضها (من خلال AJAX).　

ligerGrid هي عنصر تحكم رئيسي في سلسلة ligerui، يمكن للمستخدم إنشاء جدول جميل وملتزم بسرعة، يدعم الترتيب والصفحة المتقطعة والأسطر المتعددة والعمود الثابتة، إلخ.　

في هذا المثال، يتم تنفيذ الصفحة المتقطعة بناءً على LigerUI فقط　

يوجد نوعان من طرق الصفحة المتقطعة في LigerUI:localوserver.

إذا كانت كمية البيانات ليست كبيرة، يمكنك استخدام الصفحة المتقطعة المحلية مباشرة، وإرسال البيانات إلى الواجهة الأمامية مرة واحدة، ثم ستجري LigerUI صفحة المتقطعة تلقائيًا. عندما يتم إرسال jsonString إلى الخلفية، يتم إرسال total المحدد مسبقًا (عدد السجلات الإجمالية)، يمكنك تعريف ما تريد، ولكن ستحصل الواجهة الأمامية تلقائيًا على عدد السجلات الإجمالية وتعيينها إلى total، هذا هو طريقة local.　

وإذا كانت كمية البيانات كبيرة جدًا، فإن تحميل البيانات مرة واحدة قد يؤدي إلى عدم عرض البيانات أو تأخير الاستجابة، لذا يجب استخدام الصفحة المتقطعة على الخادم. عند استخدام الصفحة المتقطعة على الخادم، سيتم إرسال اثنين من المعلمات إضافية في كل طلب مقارنة بالصفحة المتقطعة المحلية: page وpagesize، وليس من الضروري إرسالها بنفسك، فقط الحصول عليها في الخلفية.　

int page=Integer.parseInt(request.getParameter("page"));　
int pagesize=Integer.parseInt(request.getParameter("pagesize"));　
int total;　

في هذه الحالة، يمكنك إدخال page وpagesize في جملة sql الخاصة بك:　
sql=".........";　
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;　

يمكن وضع النتائج التي تم العثور عليها في jsonString، يجب الانتباه إلى total هنا، يجب تعريف total بشكل مستقل، وسيكون من الضروري البحث عن عدد السجلات الإجمالية مرة أخرى وتعيينها إلى total ثم إرسالها إلى الصفحة، وسيساعدك LigerUI في حل بقية الأمور!　

للإطلاع على المزيد من معلومات ligerUI grid، يرجى الرجوع إلى API على الموقع الرسمي　 http://api.ligerui.com/?to=grid
للإطلاع على كيفية اختيار الصفحة المتقطعة الأمامية أو الخلفية، يرجى الرجوع إلى https://ar.oldtoolbag.com/article/86326.htm

localالتحقيق يتطلب فقط تقديم جميع البيانات المطلوبة إلى واجهة المستخدم الأمامية، والتي ستقوم تلقائيًا بتنفيذ الصفحة المتقطعة، ولكن أنا لا أعتبر الصفحة المتقطعة على الجهاز الأمامي كخيار جيد، لأن هناك شبكة بين خادم تطبيق الويب وواجهة المستخدم الأمامية، إذا كان كمية البيانات التي يتم نقلها عبر الشبكة أقل، فإن سرعة الاستجابة على الجهاز الأمامي ستكون أسرع. بالإضافة إلى ذلك، عادة ما يكون قدرة خادم قاعدة البيانات وخادم تطبيق الويب أكبر بكثير من الجهاز الأمامي. من هذين الجانبين، يمكن القول إن خيار الصفحة المتقطعة على الجهاز الأمامي هو الأقل جاذبية.　

Below is the server-side pagination code:

Since only pagination is used, only part of the plugins and images are imported

Introduce the required jquery, liger and css　

<link href="js/ligerui-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<script type="text/javascript" src="js/ligerui.all.js"></script>

jsp example as follows: In ligerGrid, you need to specify dataAction (default is local), request url, page and pageSize, where page and pageSize can be obtained from the backend　

<script type="text/javascript" >
$(function(){
 var grid = $("#maingrid").ligerGrid({
  columns: [
  { name: 'id', display: '序号',
   render:function(record, rowindex, value, column){
    return rowindex+1;
   }
  },
  { name: 'title', display: '标题'}
  ],
  height:210,
  dataAction:"server",
  url:"LUServlet",
  page:"1",
  pageSize:"5"
  });
});
</script>
</head>
<body>
<div style="width:600px">
<div id="maingrid"></div>
</div>

model class and test database　

//for convenience, use sql.Date
import java.sql.Date;
public class Blog {
 private int id;
 private int category_id;
 private String title;
 private String content;
 private Date created_time;
 //getter和setter方法
 @Override
 public String toString() {
  return "Blog [id=" + id + ", category_id=" + category_id + ", title="[#1#]", content=" + content
    + ", created_time=" + created_time + "]";
 }
}

dao类，用jdbc测试　

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import model.Blog;
public class MysqlTest {
 PreparedStatement ps = null;
 ResultSet rs = null;
 Connection connect = null;
 public MysqlTest() {
  try {
   Class.forName("com.mysql.jdbc.Driver");
   connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/blogs_stu", "root", "");
  }
   e.printStackTrace();
  }
 }
 //返回一个Blog数组，用于拼接json字符串
 //不用model时可以直接在此处拼接json字符串返回
 //传入page和pagesize用于判断最后一页数组长度，否则会报错
 public Blog[] getInfo(String sql,int page,int pagesize) {
  int total=getTotal();
  if(page*pagesize>=total){
   pagesize=total%pagesize;
  }
  Blog[] blog = new Blog[pagesize];
  try {
   ps = connect.prepareStatement(sql);
   rs = ps.executeQuery();
   int index=0;
   while (rs.next()) {
    blog[index] = new Blog();
    blog[index].setId(rs.getInt("id"));
    blog[index].setCategory_id(rs.getInt("category_id"));
    blog[index].setTitle(rs.getString("title"));
    blog[index].setContent(rs.getString("content"));
    blog[index].setCreated_time(rs.getDate("created_time"));
    index++;
   }
  }
   e.printStackTrace();
  }
   إذا كان connect != null
    try {
     connect.close();
     ps.close();
     rs.close();
    } سوى (SQLException e) {
     e.printStackTrace();
    }
  }
  عدد الكل;
 }
 // الحصول على عدد السجلات الكلي total
 public int getعدد الكل() {
  int عدد الكل = 0;
  String sql = "";
   try {
    sql = "select count(id) from blog";
    ps = connect.prepareStatement(sql);
    rs = ps.executeQuery();
    while (rs.next()) {
    عدد الكل = rs.getInt(1);
    }
   } سوى (SQLException e) {
    e.printStackTrace();
   }
   عدد الكل;
  }
}

تحقيق servlet في الخلفية　

استيراد java.io.IOException;
استيراد java.io.PrintWriter;
استيراد javax.servlet.ServletException;
استيراد javax.servlet.annotation.WebServlet;
استيراد javax.servlet.http.HttpServlet;
استيراد javax.servlet.http.HttpServletRequest;
استيراد javax.servlet.http.HttpServletResponse;
import model.Blog;
import mysqljdbc.MysqlTest;
@WebServlet("/LUServlet")
public class LUServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html; charset=utf-8");
  //获取页面的page和pagesize，拼接sql用
  int page=Integer.valueOf(request.getParameter("page"));
  int pagesize=Integer.valueOf(request.getParameter("pagesize"));
  MysqlTest test=new MysqlTest();
  //在拼接json字符串是传给前台一个total记录总数，ligerUI grid会自动获取该total
  int total=test.getTotal();
  request.setAttribute("total", total);
  //用的mysql，查找限定条数语句用limit,从page*pagesize-pagesize开始，取pagesize条
  String sql="select * from blog";
  sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
  Blog[] blog=test.getInfo(sql,page,pagesize);
  //将数据拼接成json字符串
  StringBuffer strbuffer=new StringBuffer();
  //ligerUI grid接受的json格式是{"Rows":[],"Total":""}
  strbuffer.append("{\"Rows\":[");
  for(int i=0;i<blog.length;i++){
   strbuffer.append("{\"title\":").append("\"" + blog[i].getTitle() + "\"},");
  }
  strbuffer.replace(strbuffer.length()-1, strbuffer.length(), "");
  strbuffer.append(",").append("\"Total\":").append("\""+total+"\"").append("}");
  PrintWriter out=response.getWriter();
  out.write(strbuffer.toString());
  out.close();
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }
}

نتائج التنفيذ (يمكن تعديل النمط الافتراضي، يرجى الرجوع إلى API ligerUI للحصول على التفاصيل):

هذا هو محتوى المقال الكامل، نأمل أن يساعدكم هذا في تعلمكم، ونأمل أيضًا أن تدعموا ونتعليمي.

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

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

أعجبك ذلك