前端分页(js)
//前端分页 var limit = 10; //每页显示数据条数 var total = $('#host_table').find('tr').length; var allPage = total%limit>0?parseInt(total/limit)+1:parseInt(total/limit); function doPage(n){ if(allPage>1){ var prevPage='',nextPage='',pageHtml=''; if (n===1) { prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>'; nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>'; } else if(n===allPage){ prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>'; nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>'; } else { prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>'; nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>'; } if (n<=5){ for(var i=1;i<=5;i++){ if (n===i) { pageHtml += '<li class="active"><a href="javascript:;">'+ i +'</a></li>'; }else{ if(i<=allPage) { pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>'; } } } }else{ for(var i=1;i<=5;i++){ cur_page = parseInt(parseInt((n-1)/5)*5); if (n===(cur_page+i)){ pageHtml += '<li class="active"><a href="javascript:;">'+ (cur_page+i) +'</a></li>'; }else{ if((i+cur_page)<=allPage){ pageHtml += '<li data-page="'+ (i+cur_page) +'"><a href="javascript:;">'+ (i+cur_page) +'</a></li>'; } } } } $('#pagination').html(prevPage+pageHtml+nextPage); } $('#host_table').find('tr').hide(); if(n===1){ $('#host_table').find('tr:lt('+ limit +')').show(); }else{ $('#host_table').find('tr:gt('+ ((n-1)*limit-1) +'):lt('+ limit +')').show(); } } doPage(1); $('#pagination').on('click', 'li a', function(event) { event.preventDefault(); var curr = parseInt($(this).parent().data('page')); if (!isNaN(curr)) { doPage(curr); } });
<div class="text-right" style="margin-top:-30px;padding-right:9%"> <ul class="pagination" id="pagination"></ul> </div>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步