java实现layui分页_JavaWeb使用layui实现分页

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

JavaWeb使用layui实现分页

【1】视图层

播放

删除

var tabMusicInfor;//音乐信息表

var i=0;

var layer, table;

//1-页面数据加载

$(function () {

//【1】加载&初始化layui模块

layui.use(["layer", "table"], function() {

table = layui.table;//【2】获取layui的table模块的属性

layer = layui.layer;//弹出层

//加载table模块数据

layuiTable();

});

});

//【2】加载table模块数据

function layuiTable(){

tabMusicInfor = table.render({

//【1】指定table的容器选择器或 DOM

elem: "#tabMusicInfor",

//【2】指定加载数据的路径

// url:"${ctx}/web/MyMusicServlet?method=musicList",

//【3】控制整个table元素的宽

width : 1500,

//【4】设置表头。值是一个二维数组

cols: [[

{ type: "checkbox", fixed :"left",width:"10%"},

{ type: "numbers", title: "序号",width:"10%"},

{ field: "music", title: "音乐名" ,width:"30%"},

{ field: "songer", title: "歌手" ,width:"30%"},

{ fixed :"right",title:"操作", toolbar: "#barDemo",align:"center"},

]],

//【5】开启分页，limit设置当前页面显示的记录值

page: {

limits : [10, 15,20,30,50 ]

,limit : 10

},

//【6】用于对分页请求(将分页重新向服务器请求数据)

request: {

pageName: "currentPage",

limitName: "rows",

},

//【7】存储当前页的列表数据

data: [],

});

//【8】音乐列表数据重载

searchTabMusic();

//【9】监听工具条事件

layuiTabletool();

}

//2-1触发音乐列表数据重载

function searchTabMusic(){

tabMusicInfor.reload({

url:"${ctx}/web/MyMusicServlet" , //【2】请求路径

where:{"method":"musicList"},

});

}

//2-2加载监听工具条

function layuiTabletool(){

table.on('tool(tabMusicInfor)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性lay-filter="对应的值"

var layEvent=obj.event;//获取该操作按钮的lay-event事件

var ID=obj.tr.selector;//获取点击该按钮的class

var data=obj.data;

var music=document.getElementById("music");//获取音乐容器的属性

console.log(this); //当前排序的 th 对象

if(layEvent === 'play'){ //播放音乐操作

i++;//记录点击次数

var text= $(""+ID).find("a").eq(0).text();

if(text=="播放"){

$(""+ID).find("a").eq(0).text("停止");

//记录点击操作按钮

onLayEventSession(ID,i);

//切歌曲

music.src="${ctx}/MyMusic/"+data.songer+"-"+data.music+".mp3";

}else{

$(""+ID).find("a").eq(0).text("播放");

music.src="";

}

} else if(layEvent === 'del'){ //删除

delEvent("${ctx}/web/MyMusicServlet",{"method":"delMusic","music":data.music,"songer":data.songer});

}

});

}

//2-3触发记录点击操作按钮事件

function onLayEventSession(ID,i){

//sessionStorage的存活周期在浏览器关闭周期或者刷新

// 保存数据到sessionStorage

sessionStorage.setItem('ID'+i, ID);

//从sessionStorage获取点击操作按钮的class

var newID = sessionStorage.getItem('ID'+i);

//从sessionStorage获取上一次点击操作按钮的class

var oldID=sessionStorage.getItem('ID'+(i-1));

var newIDtext= $(""+newID).find("a").eq(0).text();

var oldIDtext= $(""+oldID).find("a").eq(0).text();

//判断点击前一次与后一次的按钮是否一样

if(oldID!=null||oldID!=""){

if(oldID!=newID){

if(oldIDtext=="停止"){

$(""+oldID).find("a").eq(0).text("播放");

}

}

}

}

【2】控制器

//读取音乐文件

@SuppressWarnings("static-access")

publicvoid musicList(HttpServletRequest request,HttpServletResponseresponse)

throws ServletException, IOException {

//【1】设置编码

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=UTF-8");//处理响应编码

//【2】读取文件夹

Filemusic=new File(this.getServletContext().getRealPath("/MyMusic"));

List listMusicInfor=newArrayList();

ListMusicInfor list=null;

String[] strArr={};

//判断该文件是否存在

if(music.exists()){

//判断该文件是否是一个文件夹

if(music.isDirectory()) {

//读取该文件夹里面的所有文件

String[] strLists=music.list();

//遍历文件数组

for (String strList : strLists) {

//读取该文件夹里面的文件

File sing=newFile(music.getAbsolutePath()+"/"+strList);

if(!sing.isDirectory()) {

//通过截取判断文件的后缀名

StringfileName=sing.getName();

//注意使用split("\\.")而不是split(".")

//substring(截取开始的位置，截取结束的位置)

String fileTyle=fileName.substring(fileName.lastIndexOf("."),fileName.length());

if(fileTyle.equals(".mp3")){

//[0]林宥嘉-全世界谁倾听你 [1]mp3

strArr= fileName.split("\\.");

if(strArr[0].contains("-")){

strArr=strArr[0].split("-");

}elseif(strArr[0].contains("_")){

strArr=strArr[0].split("_");

}

list=new ListMusicInfor();

list.setSonger(strArr[0]);

list.setMusic(strArr[1]);

listMusicInfor.add(list);

}

}

}

StringcurrentPage=request.getParameter("currentPage");

String rows=request.getParameter("rows");

PageUtil page=findByPage(listMusicInfor,currentPage,rows);

LayuiUtil layuiUtil = newLayuiUtil(listMusicInfor.size(), page.getList());

PrintWriter out =response.getWriter();

out.write(layuiUtil.toJson(listMusicInfor.size(),page.getList()));

out.flush();

out.close();

}

}

}

publicPageUtil findByPage(Listlist,String currentPage,String rows){

//【1】创建分页对象

PageUtil page=new PageUtil();

//【2】添加当前页

page.setCurrentPage(currentPage);

//【3】每页显示条数

page.setRows(rows);

//【4】总记录数

int totalCount=list.size();

page.setTotalCount(totalCount);

//【5】列表数据

//计算开始的记录索引

ArrayList newlist=newArrayList();

int start=(page.getCurrentPage()-1)*page.getRows();

int end=start+page.getRows();

//取出所需的数据--列表数据

for (int i = start; i < end; i++) {

if(i

newlist.add(list.get(i));

}

}

page.setList(newlist);

//【6】计算总页码

try {

inttotalPage=(totalCount%page.getRows())==0?totalCount/page.getRows():(totalCount/page.getRows()+1);

page.setTotalPage(totalPage);

} catch (ArithmeticException e) {

//TODO: handle exception

}

return page;

}

【3】总结分析

1)首先做好准备工作layui的table组件默认规定的数据格式

{

“code”:0;

“msg”:””;

“count”:list.size();

“data”:list数组;

}

2)根据上方的数据格式封装一个layui的table组件接收数据的工具类

publicclass LayuiUtil {

//反正我是忽略code和msg，如果非要封装那就自己自定义

// private int code;

// private String msg;

privateintcount;

private List data;

public LayuiUtil(int count,List data) {

// this.code=code;

// this.msg=msg;

this.count=count;

this.data=data;

}

//注意转换为json数据交互

public String toJson() {

String json=ToJsonUtil.toJson(count,data);

return json;

}

publicstatic String toJson(int count, List data){

LayuiUtil layuiUtil = new LayuiUtil(count, data);

return layuiUtil.toJson();

}

}

3)我引用了json-lib-2.4-jdk15.jar封装了一个转换数据为json格式的工具类ToJsonUtil

//传递layui表格数据json格式化

//在这里要加code和msg

publicstatic String toJson(int count,List> data){

JSONObject jsonObj=new JSONObject();

jsonObj.put("data", data);

jsonObj.put("count", count);

jsonObj.put("msg", "");

jsonObj.put("code", 0);

return jsonObj.toString();

}

4)最后是封装分页工具类，当然这个也可以不封装，反正我封装好了，你们自己写吧

5)需要从页面获取

request:{pageName: "currentPage"//当前页码

,limitName: "rows",//每页显示条数

},//通过算法达到分页动态显示数据的效果