English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

jQuery ligerUIでページングスタイルを実現する

会社でのインターンシップで、会社のフレームワークでligerUIのgridを使用して分ページを行っているのを見て、とても使いやすいと感じました。自分で試しながら実現し、記録しました。　

簡単に言えば、liger gridは準備されたデータを指定されたターゲットリクエストデータに送信し、データを取得した後、表示します（ajaxを通じて実現）。　

ligerGridはligeruiシリーズプラグインのコアコントロールです。ユーザーは美観があり、機能が強力なテーブルを作成できます。ソート、分ページ、多表頭、固定列などがサポートされています。　

ここではligerUIに基づく分ページを実現しています。　

LigerUIの分ページ方法は2種類あります：localとサーバー

データ量がそれほど大きくない場合、ローカル分ページを使用して、データを一括でフロントエンドに送信します。その後、LigerUIのgridが自動的に分ページを行います。totalについて説明します。バックエンドからjsonStringを送信する際には、定義されたtotal（合計数）を送信します。どれだけ定義しても構いませんが、フロントエンドでは自動的に合計数をtotalに設定します。これはローカルの方法です。　

データ量が大きい場合、一度にデータをロードするとデータが表示されないか、遅延が発生するため、サーバー分ページを使用する必要があります。サーバー分ページを使用する場合、各リクエストはローカル時よりも2つのパラメータ、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の詳細については公式WebサイトのAPIを参照してください。　 http://api.ligerui.com/?to=grid
フロントエンドのページングかバックエンドのページングを選択する際の参考として、https://ja.oldtoolbag.com/article/86326.htm

local実装は、データをすべて前端フレームワークに送信するだけで、フレームワークが自動的にページングを行ってくれるため、クライアント側のページングは推奨しません。Webアプリケーションサーバとクライアントの間にはネットワークがあり、ネットワークを介して伝送されるデータ量が少ないほど、クライアントが応答を得る速度が速くなります。さらに、データベースサーバとWebアプリケーションサーバの処理能力は、一般的にクライアントよりも強いです。これらの点を考慮すると、クライアント側のページングは最も適切でない方法です　

以下はserver端のページングコードです：

ページングのみを使用するため、必要なプラグインと画像のみをインクルードしています

　

必要なjquery、liger、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の例として以下の通り：ligerGridではdataAction（デフォルトはlocal）を指定し、リクエストのURL、pageとpageSizeを指定します。pageとpageSizeはバックエンドから取得できます　

<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クラスとテストデータベース　

//省事のために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", "");
  } catch (Exception e) {
   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++;
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
   if (connect != null)
    try {
     connect.close();
     ps.close();
     rs.close();
    } catch (SQLException e) {
     e.printStackTrace();
    }
  }
  return blog;
 }
 //全記録数totalを取得
 public int getTotal() {
  int total = 0;
  String sql = "";
   try {
    sql = "select count(id) from blog";
    ps = connect.prepareStatement(sql);
    rs = ps.executeQuery();
    while (rs.next()) {
    total = rs.getInt;1);
    }
   } catch (SQLException e) {
    e.printStackTrace();
   }
   return total;
  }
}

後台servlet実装　

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import 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();
  //{"Rows":[],"Total":""}がligerUI gridで受け取るJSON形式です。
  strbuffer.append("{\"Rows\":[");
  for(int i=0;i

実行結果（デフォルトのスタイルは変更可能です。詳細はligerUI APIを参照してください）：






これでこの記事のすべての内容が終わります。皆様の学習に役立てば幸いです。また、ナイアラチュートリアルを多くのご支援をいただけますようにお願いします。
		
声明：この記事の内容はインターネットから取得しており、著作権者はすべて所有しています。インターネットユーザーが自発的に貢献し、アップロードした内容であり、このサイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害が疑われる場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください）で報告し、関連する証拠を提供してください。一旦確認がとりついたら、このサイトは侵害された内容をすぐに削除します。
基礎教程
おすすめ