So implementieren Sie Paging in Laui-Layui-Tutorial-php.cn

Heim

Web-Frontend

Layui-Tutorial

So implementieren Sie Paging in Laui

angryTom

Jul 29, 2019 am 11:06 AM

layui

So implementieren Sie Paging in Laui

Wenn Sie mehr über Laui erfahren möchten, klicken Sie auf: Laui-Tutorial

Dies basiert auf dem von mir selbst erstellten SSM-Fall-Framework

Das Rendering ist wie folgt

So implementieren Sie Paging in Laui

Paging-JSP- und JS-Inhaltsmodule werden vorübergehend zusammen geschrieben. Natürlich können Sie auch eine js-Datei schreiben

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
 <link rel="stylesheet" href="<%=basePath %>js/layui/css/layui.css">
    <script type="text/javascript" src="<%=basePath %>js/layui/layui.all.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
    <script  type="text/javascript" src="<%=basePath %>js/jquery-3.3.1.min.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 <div class="layui-form-item">
 <div class="layui-input-inline">
     <input type="text" name="selectValue" id="selectValue" lay-verify="required" placeholder="客户姓名，电话" autocomplete="off" class="layui-input">
 </div>
 <button class="layui-btn" type="button"  id="selectButton">搜索</button>
 </div>
 <table class="layui-hide" id="test"></table>
 <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" οnclick="yhck()">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit"οnclick="yhbj()">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"οnclick="yhsc()">删除</a>
</script>
 <script>
layui.use(&#39;table&#39;, function(){
  var table = layui.table;
  var ids =new Array();
  var curPath=window.document.location.href;  
  var localhostPaht=curPath.substring(0,32);
  var selectValue=document.getElementById("selectValue").value;
  console.log(selectValue);
  table.render({
    elem: &#39;#test&#39;
   // ,url:localhostPaht+&#39;userlist.do?page=&#39;+page+&#39;&limit=&#39;+limit+&#39;&selectValue=&#39;+selectValue
    ,url:localhostPaht+&#39;userlist.do&#39;
    //分页插件
    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
    	layout: [&#39;limit&#39;, &#39;count&#39;, &#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;skip&#39;] //自定义分页布局
        ,groups: 1 //只显示 1 个连续页码
        ,first: false //不显示首页
        ,last: false //不显示尾页
        
      }
    //显示字段参数
    ,cols: [[
      {field:&#39;uid&#39;, width:&#39;5%&#39;, title: &#39;ID&#39;, sort: true}
      ,{field:&#39;uname&#39;, width:&#39;10%&#39;, title: &#39;用户名&#39;}
      ,{field:&#39;sex&#39;, width:&#39;8%&#39;, title: &#39;性别&#39;}
      ,{field:&#39;national&#39;, width:&#39;8%&#39;, title: &#39;民族&#39;, sort: true}
      ,{field:&#39;age&#39;, width:&#39;8%&#39;, title: &#39;年龄&#39;}
      ,{field:&#39;constellation&#39;, title: &#39;星座&#39;, width:&#39;10%&#39;}
      ,{field:&#39;unative&#39;, width:&#39;10%&#39;, title: &#39;籍贯&#39;, sort: true}
      ,{field:&#39;labeltext&#39;, title: &#39;描述&#39;, width:&#39;20%&#39;}
      ,{fixed: &#39;right&#39;, width:&#39;20%&#39;, title: &#39;基本操作&#39;,align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}
    ]]
   
  });
});
</script>
</body>
</html>

Backend-Implementierung

Hauptsache Seite, begrenzen, zählen und andere Dinge können mit dem Laui-Paging-Plug-in (dem Die JSP-Seite hat diesen Code), solange die drei Werte von Seite, Limit und Anzahl durch Paging realisiert werden können.

//分页插件
    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
    	layout: [&#39;limit&#39;, &#39;count&#39;, &#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;skip&#39;] //自定义分页布局
        ,groups: 1 //只显示 1 个连续页码
        ,first: false //不显示首页
        ,last: false //不显示尾页
        
      }

gibt den Objekttyp zurück. und js behandelt diesen Typ als JSON-Daten

@SuppressWarnings("null")
	@RequestMapping(value = "userlist")
	@ResponseBody
	public Object userlist(HttpServletRequest request, HttpServletResponse response) {
		//分页
		String pageNo=request.getParameter("page");
		String pagesize=request.getParameter("limit");
		String uname=request.getParameter("selectValue");
		HashMap<String, Object> map=new HashMap<String, Object>();
		map.put("pageNo", (Integer.valueOf(pageNo)-1));
		map.put("pagesize", pagesize);
		//查询总数量
		List<User> listsize = user.findAll();
		//分页传参page<当前页>和limit<显示数据条数>
		List<User> list=null;
		try {
			list = user.selectAlllist((Integer.parseInt(pageNo)-1)*Integer.parseInt(pagesize),Integer.parseInt(pagesize));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println("条数："+list.size());
		Map<String, Object> result = new HashMap<String, Object>();
		int count = listsize.size();  
		JSONArray json = JSONArray.fromObject(list);  
		String js=json.toString();
        //*****转为layui需要的json格式，必须要这一步，博主也是没写这一步，在页面上数据就是数据接口异常  
        String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}"; 
        System.out.println(jso); 
        return jso;
   
	}

entsprechende SQL

select uid,uname,upass,sex,age,constellation,unative,national,labeltext from user where 1=1   limit #{pageNo},#{pagesize}

und Dao-Methodenparameterübergabe

  public 	List<User> selectAlllist(
    		@Param("pageNo") Integer pageNo
    		,@Param("pagesize") Integer pagesize);

Implementierung von daoimpl

@Override
	public List<User> selectAlllist(Integer pageNo, Integer pagesize) {
		// TODO Auto-generated method stub
		return user.selectAlllist(pageNo,pagesize);
	}

Implementierung von Service

public List<User> selectAlllist(Integer pageNo, Integer pagesize);

Implementierung von serviceimpl

@Override
	public List<User> selectAlllist(Integer pageNo, Integer pagesize) {
		// TODO Auto-generated method stub
		return usi.selectAlllist(pageNo,pagesize);
	}

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Paging in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Wie benutze ich das Flussmodul von Layui für das unendliche Scrollen?Mar 18, 2025 pm 01:01 PM

In dem Artikel wird das Flow -Modul von Layui zum unendlichen Bildschirmrollen, Abdecken von Setup, Best Practices, Leistungsoptimierung und Anpassung für erweiterte Benutzererfahrung erläutert.

Wie verwende ich das Elementmodul von Layui, um Registerkarten, Akkordeons und Fortschrittsbalken zu erstellen?Mar 18, 2025 pm 01:00 PM

In dem Artikel wird beschrieben

Wie kann ich das Aussehen und das Verhalten des Karussellmoduls von Layui anpassen?Mar 18, 2025 pm 12:59 PM

In dem Artikel wird das Anpassung des Karussellmoduls von Layui erörtert, der sich auf CSS- und JavaScript -Modifikationen für Aussehen und Verhalten konzentriert, einschließlich Übergangseffekten, Autoplay -Einstellungen und Hinzufügen benutzerdefinierter Navigationskontrollen.

Wie verwende ich das Karussellmodul von Layui, um Bildschieber zu erstellen?Mar 18, 2025 pm 12:58 PM

Der Artikel führt zur Verwendung von Layui -Karussellmodul für Bildschieber, Detailschritte für Setup-, Anpassungsoptionen, Implementierung von Autoplay- und Navigationsstrategien sowie Leistungsoptimierungsstrategien.

Wie konfiguriere ich das Upload -Modul von Layui, um Dateitypen und -größen einzuschränken?Mar 18, 2025 pm 12:57 PM

In dem Artikel wird das Konfigurieren von Layui -Upload -Modul zur Einschränkung von Dateitypen und -größen mithilfe von Akzeptieren, Exts und Größeneigenschaften sowie Anpassung von Fehlermeldungen für Verstöße erläutert.

Wie verwende ich das Layui -Ebenenmodul, um modale Fenster und Dialogfelder zu erstellen?Mar 18, 2025 pm 12:46 PM

In dem Artikel wird erläutert, wie das Layui -Layer -Modul zum Erstellen modaler Fenster und Dialogfelder verwendet wird, um Setup, Typen, Anpassungen und gemeinsame Fallstricke zu vermeiden.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vorByDDD

Will R.E.P.O. Crossplay haben?

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

Dreamweaver CS6

Visuelle Webentwicklungstools

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7549

CakePHP-Tutorial

1382

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten