Lauiui でページングを実装する方法-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

Lauiui でページングを実装する方法

angryTom

Jul 29, 2019 am 11:06 AM

layui

Lauiui でページングを実装する方法

layui について詳しく知りたい場合は、次をクリックしてください: layui チュートリアル

##これは、私が構築した SSM ケースフレームワークに基づいています。

レンダリングは次のとおりです

Lauiui でページングを実装する方法 ##ページネーション jsp と js コンテンツモジュールが一時的に一緒に書かれています。もちろん、js ファイルを記述することもできます。

<%@ 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>

バックエンド実装

主な場所は page、カウント、その他のことは、layui ページングプラグイン ( jsp ページにはこのコードがあります)、page、limit、count の 3 つの値がページングによって実現できる限り

//分页插件
    ,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 //不显示尾页
        
      }

オブジェクト型を返すと、js はこれを処理しますjson データとして入力

@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;
   
	}

対応する sql

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

および

dao メソッドパラメータの受け渡し

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

daoimpl 実装

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

サービス実装

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

serviceimpl 実装

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

以上がLauiui でページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。