이 글은 주로 jQuery에서 레이어 페이지네이터의 사용법을 소개합니다. 레이어 페이지네이터의 기술을 소개하는 내용이 도움이 될 것입니다.
layui는 간단한 구성으로 페이징 효과를 생성하는 데 사용할 수 있는 페이징 구성 요소를 제공합니다.
위 코드:
// 点击查询按钮 开始显示表格内容 // 如果查询内容不存在 则显示为空 $('#searchBtn').click(function(){ var html = ''; $.ajax({ type:"GET", url:"data/tsResult.json", success:function(TS){ // 拿到投诉案件数据 // 分页器 layui.use(['laypage','layer'],function(){ var laypage = layui.laypage, layer = layui.layer; var num = 7;//每一页出现的数据量 // 模拟渲染 var render = function(curr){//当前页 var html = '', last = curr*num-1;//当前页的最后一行数据的下标 last = last >= TS.length?(TS.length-1):last; for(var i=(curr*num-num); i<=last; i++){ // 从未显示的第一行开始 html += '<tr>'+ '<td width="4%">'+TS[i].id+'</td>'+ '<td width="8%">'+TS[i].COMPNAME+'</td>'+ '<td width="12%">'+TS[i].COMTELPHONE+'</td>'+ '<td width="16%">'+TS[i].COMPCARD+'</td>'+ '<td width="8%">'+TS[i].DJRQ_S+'</td>'+ '<td width="8%">'+TS[i].COMTYPE+'</td>'+ '<td width="28%">'+TS[i].COMCONTEXT+'</td>'+ '<td width="8%">'+TS[i].STATE+'</td>'+ '<td width="8%" style="text-align:center;"><button class="layui-btn doBtn">'+TS[i].btn+'</button></td>'+ '</tr>'; } return html; }; laypage({ cont:'demo4', pages:Math.ceil(TS.length/num), first:false, last: false, jump:function(obj){ document.getElementById('TS-list').innerHTML = render(obj.curr); } }); }); } }); });
코드에 대한 간략한 설명:
1. #searchBtn은 페이지를 매겨야 하는 데이터를 얻기 위해 Ajax 요청을 시작합니다.
2. 성공하면 콜백이 실행되어 페이징 + 스플라이싱을 수행합니다.
3. 필수 코드
layui.use(['laypage','layer'],function(){ var laypage = layui.laypage, layer = layui.layer; }
4. 페이지에 표시해야 하는 항목 수를 정의하고, 렌더링 방법을 정의하고, 시뮬레이션 렌더링을 수행합니다.
5. Jump 구현을 위한 Jump
위 코드는 바로 사용할 수 있으며, 객체만 변경하면 됩니다.
관련 권장 사항:
php는 호출기 CLinkPager 샘플 코드 공유를 다시 작성합니다.
javascript - 초보자는 프로젝트에서 sg의 호출기를 모방합니다. 조언을 주십시오.
위 내용은 jQuery의 레이어 페이지네이터 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!