该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
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",//每页显示条数
},//通过算法达到分页动态显示数据的效果

https://www.cnblogs.com/yadongliang/p/11059108.html

https://blog.csdn.net/sdiudui/article/details/80424539

后续补充

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
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",//每页显示条数
},//通过算法达到分页动态显示数据的效果

1.下载layui

https://www.layui.com/(layui前端框架由贤心创作)

2.查看文档

https://www.layui.com/doc/modules/laypage.html(分页)

3.实例展示

//核心配置

layui.config({
    base : "js/"
}).use(['form','layer','jquery','laypage'],function(){
    var form = layui.form(),
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        laypage = layui.laypage,
        $ = layui.jquery;

//加载页面数据
    var noticeData = '';
    $.ajax({
        url:'/notice/select',
        type:'post',
        dataType:'json',    
        contenType : 'application/json', 
        error: function(data){
            alert("失败!");
        },
        success: function(data){
            noticeData=data;
            noticeList();
        }
       });

function noticeList(that){
        //渲染数据
        function renderDate(data,curr){
            var dataHtml = '';
            if(!that){
                currData = noticeData.concat().splice(curr*nums-nums, nums);
            }else{
                currData = that.concat().splice(curr*nums-nums, nums);
            }
            if(currData.length != 0){
                for(var i=0;i<currData.length;i++){
                    dataHtml +='<tr>';
                    dataHtml +='<td>'+currData[i].notice_id+'</td>';
                    dataHtml +='<td>'+currData[i].title+'</td>';
                    dataHtml +='<td>'+currData[i].user_id+'</td>';
                    dataHtml +='<td>'+timeStamp2String(currData[i].turnover_time)+'</td>';
                    dataHtml +='<td>'+currData[i].clicks+'</td>';
                    dataHtml +='<td>'+currData[i].classify+'</td>';
                    dataHtml +='<td>'+currData[i].prospectus+'</td>';
                    dataHtml +='<td>'+currData[i].photo+'</td>';
          dataHtml +='<td>'+'<a href="noticeEdit.html?notice_id='+currData[i].notice_id+'"><button type="button"><i class="iconfont icon-edit"></i>编辑</button></a>'
                    +'<button type="button" onclick="deletey5555('+currData[i].notice_id+')" style="background-color:yellow;">删除<i class="layui-icon">&#xe640;</i></button>'+'</td>';
                    dataHtml +='</tr>';
                }
            }
            return dataHtml;
        }

        //分页
        var nums = 2; //每页出现的数据量
        if(that){
            noticeData = that;
        }
        laypage({
            cont : "page",
            pages : Math.ceil(noticeData.length/nums),
            jump : function(obj){
                $(".thead").html(renderDate(noticeData,obj.curr));
                $('.notice_list thead input[type="checkbox"]').prop("checked",false);
                form.render();
            }
        })
    }

分页效果图



4.layui分页使用总结

通过核心参数laypage.render(options)来设置分页参数