分页功能改善,以form方式提交查询条件,可手动修改每页显示数量

    xiaoxiao2022-06-29  49

    JSP代码 <div class="row"> <div class="pull-left" style="display:inline-flex;"> <span id="total"></span> <span style="margin-left:5px;">每页显示 <select id="forPage"> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> 条记录</span> </div> <div id="page1" class="pull-right"></div> </div>

    js代码

    $(function() { searchOwner(); $("#forPage").change(function(){ searchOwner(); }); }); function searchOwner(curr) { var pageSize = $("#forPage").children('option:selected').val();; var page = curr || 1; $.ajax({ url : "${base}ownerDanGoodsController/getDate?page=" + page + "&pageSize=" + pageSize, type : "POST", data : $('#searchForm').serialize(), date : new Date(), dataType : 'json', success : function(res) { laypage({ cont : 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div> pages : res.pages, //通过后台拿到的总页数 curr : curr || 1, skin : 'molv', //皮肤 skip : true, //是否开启跳页 //first: '首页', //若不显示,设置false即可 //last: '尾页', //若不显示,设置false即可 //prev: '<', //若不显示,设置false即可 //next: '>', //若不显示,设置false即可 jump : function(obj, first) { //触发分页后的回调 if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr searchOwner(obj.curr); } } }); $('#tbody').html(PackagData(res)); $('#total').html("总共" + res.total + "条记录"); } }); }

    转载请注明原文地址: https://ju.6miu.com/read-1125110.html

    最新回复(0)