layui+ajax實(shí)現(xiàn)類似淘寶分頁的案例
有個(gè)問題艰猬，就是我在點(diǎn)擊自定義每頁顯示多少條數(shù)據(jù)時(shí)议经，下面的頁碼是改變了斧账，但是每頁數(shù)據(jù)顯示的條數(shù)還是最開始設(shè)定的
問題解決:在jump里加上limit = obj.limit
如果只是單純的規(guī)定顯示多少數(shù)據(jù)，下面代碼還是不錯(cuò)的
先說步驟
layui.use(['jquery','layer','laypage'],function () {
//渲染展示商品的html頁面
//同步加載訂單數(shù)據(jù)
//分頁的完整功能
});
詳細(xì)代碼
<div class="row posts-wrapper" id="ajax1">
</div>
<div id="demo7" >
</div>
<script>
layui.use(['jquery','layer','laypage'],function () {
var $ =layui.jquery,
layer =layui.layer,
laypage =layui.laypage;
var page =1;//當(dāng)前頁
? var limit =10;//每頁顯示的數(shù)目
? ? var resCount,resData ;
var resPage = renderPage1();
//渲染展示商品的html頁面
? ? function renderProductHtml(data){
var s ="";//用來存儲(chǔ)html內(nèi)容
? ? ? ? for (var i=0;i
// window.document.getElementById("exampleid").value = data[i].id;
? ? ? ? ? ? s+="\n" +
"? ? <div class=\"col-sm-6 col-md-4 col-lg-3\">\n" +
"? ? ? ? <article id=\"post-175\" class=\"post post-grid post-175 type-post status-publish format-standard has-post-thumbnail hentry category-ui category-design tag-ui tag-81\">\n" +
"\n" +
"\n" +
"? ? ? ? ? ? <div class=\"entry-wrapper\">\n" +
"? ? ? ? ? ? ? ? <a class=\"grid_author_avt\" href=\"175.html\"><div class=\"grid_author_bggo avatar bg-cover\" style=\"background-image: url(<%=basePath%>/static/image/1.png);\"></div> </a>\n" +
"\n" +
"? ? ? ? ? ? ? ? <header class=\"entry-header\">\n" +
"\n" +
"? ? ? ? ? ? ? ? ? ? <h2 class=\"entry-title\" id=\"layerDemo\" ><span>貨物:"+data[i].goods+" </span> <span data-method=\"setTop\" class=\"layui-btn\" id=\"t1\" >訂單詳情</span></h2>\n" +
"? ? ? ? ? ? ? ? </header>\n" +
"? ? ? ? ? ? ? ? <div class=\"entry-excerpt u-text-format\">運(yùn)費(fèi):"+data[i].carriage+"元 狀態(tài):"+data[i].status+"</div>\n" +
"? ? ? ? ? ? ? ? <div class=\"entry-excerpt u-text-format\">出發(fā)地："+data[i].placeDispatch+"? </div>\n" +
"? ? ? ? ? ? ? ? <div class=\"entry-excerpt u-text-format\">抵達(dá)地："+data[i].placeReceipt+"</div>\n" +
"? ? ? ? ? ? ? ? <div class=\"entry-footer\">\n" +
"\n" +
"? ? ? ? ? ? ? ? ? ? <time ><i class=\"fa fa-clock-o\"></i>發(fā)布時(shí)間： "+"<span id=\"datatime\">"+timestampToTime(data[i].createTime)+"</span></time>\n" +
"? ? ? ? ? ? ? ? ? ? </a>\n" +
"\n" +
"? ? ? ? ? ? ? ? </div>\n" +
"? ? ? ? ? ? </div>\n" +
"? ? ? ? </article>\n" +
"? ? </div>\n" +
"\n"
? ? ? ? }
$("#ajax1").html(s);
}
//同步加載訂單數(shù)據(jù)
? ? function renderProduct(page, limit){
var query ='';
var data ={"page": page,"limit": limit,"query":query};
console.log("data："+data);
$.ajax({
async:false,
type :"post",
url:'<%=basePath%>/order/findByPage',
data :JSON.stringify(data),
dataType :'json',
contentType:"application/json;charset=utf-8",
success:function(result){
console.info(result);
resCount = result.count;
resData = result.data;
renderProductHtml(resData);
}
});
}
//分頁的完整功能
? ? function renderPage1(){
renderProduct(page,limit);
laypage.render({
elem:'demo7'
? ? ? ? ? ? ,count:resCount
? ? ? ? ? ? ,limits: [10,20,30]
,curr:page
? ? ? ? ? ? ,theme:'#FFB800'
? ? ? ? ? ? ,layout: ['count','prev','page','next','limit','refresh','skip']
,jump:function(obj, first){
console.info(obj);
page = obj.curr;
if(!first){
renderProduct(page,limit);
}
}
});
}
});
</script>
后臺(tái)controller
@RequestMapping("/findByPage")
@ResponseBody
public Map findByPage(@RequestBody Map map) {
System.out.println("map："+map);//map：{curr=2, nums=8, query=}
? ? System.out.println("map.page："+map.get("page"));
System.out.println("map.limit："+map.get("limit"));
int count =(Integer) map.get("limit");//每一頁顯示的條數(shù)
? ? int start =( (Integer)map.get("page")-1)*count;//每一頁的開始下標(biāo)
? ? System.out.println("count："+count);
System.out.println("start："+start);
map.put("start",start);
List list =this.impl.query(map);
System.out.println("list：" + list);
Map map1 =new HashMap();
map1.put("count",impl.querySize(map));//總數(shù)據(jù)量
? ? map1.put("data", list);
map1.put("code",0);
map1.put("msg","我是后臺(tái)返回的唄");
System.out.println("map1：煞肾，咧织，，" + map1);
return map1;
}
mapper.xml
<select id="query" resultMap="BaseResultMap"
? ? ? ? parameterType="java.util.Map">
select
<include refid="Base_Column_List" />
from orders
<where>
<if test="query!=null">
concat(id,remark) like "%${query}%"
</if>
</where>
order by create_time desc
limit #{start},#{limit};
</select>
<select id="querySize" resultType="int" parameterType="java.util.Map">
selectcount(*) from orders
<where>
<if test="query!=null">
concat(id,remark) like? "%${query}%"
</if>
</where>
</select>
