【JavaScript】无框架翻页处理
这个业务太复杂了
输入框的东西要用接口查出来，居然不是用户手动输入
然后我就要做一个翻页的查询列表：
<div form id="troublePartSearch" style="display: none;"> <h4>肇事零件搜索</h4> <div> <label style="margin-left: 10px; display: inline-block;">配件代码：</label> <input id="partCode" type="text" style="width: 49%;"> </div> <div> <label style="margin-left: 10px;display: inline-block;">配件名称：</label> <input id="partName" style="width: 49%;" type="text"> </div> <div align="center"> <button type="button" id="partInfoSearchBtn" class="mui-btn mui-btn-red "><span class="mui-icon mui-icon-search"> </span>查询</button> <button type="button" id="partInfoSearchResetBtn" class="mui-btn mui-btn-red "><span class="mui-icon mui-icon mui-icon-refreshempty"> </span>重置</button> </div> <hr> <div align="center"><h4>配件选择</h4></div> <div style="overflow: scroll;padding: 5px;"> <table border="1"> <tr> <td>序号</td> <td>选择</td> <td>配件代码</td> <td>配件名称</td> <td>备注</td> <td>类型</td> <td>类别名称</td> <td>索赔价</td> </tr> <tbody id="partSearch"></tbody> </table> </div> <div id="pagingControl"> <div style="display: flex;justify-content: space-between;padding: 5px;"> <button id="firstPage" class="mui-btn-danger">首页</button> <button id="previousPage" class="mui-btn-danger">上一页</button> <button id="nextPage" class="mui-btn-danger">下一页</button> <button id="lastPage" class="mui-btn-danger">尾页</button> </div> <div style="display: flex;justify-content: space-between;padding: 5px;"> 共<span id="totalPage"></span>页, <span id="totalRecord"></span>条记录 当前第<span id="currentPage"></span>页 </div> </div> <div align="center" style="margin: 5px;"> <button id="partInfoSelected" class="mui-btn-danger">确认</button> <button id="fallBack" class="mui-btn-danger">返回</button> </div> </div>
所以这些都是手写的，提供了一些基本的功能，当然还有跳转指定页数，调整每页展示数量，就没工夫搞这些细节了：
接口做好了封装，只管丢参数，不需要考虑其他东西
function loadPartInfoList(pp) { dms.sendAjaxRequset({ url : dms.getDmsPath()["partsOrder"] + "/partinfocommon/productProble/parts", data : pp, async : false, timeout: 3000, //超时时间设置为3秒； contentType: "application/json", type: 'GET', success: function(result) { let len = result.rows.length; let total = result.total; let htmlCode = ''; if (len == 0) { htmlCode += '<tr><td colspan="8">没有匹配的记录</td></tr>'; $partSearch.empty(); $partSearch.append(htmlCode); $pagingControl.hide(); return; } console.log('肇事配件查询结果：' + JSON.stringify(result)); $totalRecord.text(total); let tp = (total % pp.limit == 0) ? (total / pp.limit) : (parseInt(total / pp.limit) + 1); $totalPage.text(tp); $currentPage.text(pageIndex); for (let i = 0; i < len; i++) { htmlCode += '<tr>'; htmlCode += ' <td>' + (i + 1) + '</td>'; htmlCode += ' <td><input type="radio" name="partSelect" pClass="'+ result.rows[i].MAIN_PART_CLASS +'" pNo="' + result.rows[i].MAIN_PART_NO + '" pName="' + result.rows[i].MAIN_PART_NAME + '"></td>'; htmlCode += ' <td>' + result.rows[i].MAIN_PART_NO + '</td>'; // 配件代码 htmlCode += ' <td>' + result.rows[i].MAIN_PART_NAME + '</td>'; // 配件名称 htmlCode += ' <td>' + result.rows[i].PART_REMARK + '</td>'; // 备注 htmlCode += ' <td>' + result.rows[i].MAIN_PART_CLASS + '</td>'; // 类型 htmlCode += ' <td>' + result.rows[i].PARAMETER_CLASS_NAME + '</td>'; // 类别名称 htmlCode += ' <td>' + result.rows[i].PART_PRICE + ' </td>'; // 索赔价 htmlCode += '</tr>'; } $partSearch.empty(); $partSearch.append(htmlCode); $pagingControl.show(); }, error : function (p1, p2, p3) { console.log(JSON.stringify(p1) + '\n' + JSON.stringify(p2) + '\n' + JSON.stringify(p3) + '\n'); } }); }
设置对应的事件执行
// 重置 肇事配件查询条件 $partInfoSearchResetBtn.on('click', function () { pageIndex = 1; $partCode.val(''); $partName.val(''); $partSearch.empty(); $pagingControl.hide(); }); // 肇事配件查询按钮 $partInfoSearchBtn.on('click', function() { pageIndex = 1; loadPartInfoList({ sort : 'PART_NO', order : 'DESC', offset : (pageIndex - 1) * 10, limit : 10, brandCode : $brandCode.attr('bc'), // resultObj.BRAND_CODE $brandCode.text() partNo : $partCode.val(), partName : $partName.val() }); }); // 首页刷新 $firstPage.on('click', function () { if (pageIndex == 1) { mui.alert('已经是首页了！！！'); return; } pageIndex = 1; loadPartInfoList({ sort : 'PART_NO', order : 'DESC', offset : (pageIndex - 1) * 10, limit : 10, brandCode : $brandCode.attr('bc'), // resultObj.BRAND_CODE $brandCode.text() partNo : $partCode.val(), partName : $partName.val() }); }); // 上一页 $previousPage.on('click', function () { if (pageIndex == 1) { mui.alert('已经是首页了'); return; } -- pageIndex; loadPartInfoList({ sort : 'PART_NO', order : 'DESC', offset : (pageIndex - 1) * 10, limit : 10, brandCode : $brandCode.attr('bc'), // resultObj.BRAND_CODE $brandCode.text() partNo : $partCode.val(), partName : $partName.val() }); }); // 下一页 $nextPage.on('click', function () { if ($currentPage.text() == $totalPage.text()) { mui.alert('已经是尾页了'); return; } ++ pageIndex; loadPartInfoList({ sort : 'PART_NO', order : 'DESC', offset : (pageIndex - 1) * 10, limit : 10, brandCode : $brandCode.attr('bc'), // resultObj.BRAND_CODE $brandCode.text() partNo : $partCode.val(), partName : $partName.val() }); }); // 尾页 $lastPage.on('click', function () { if (pageIndex == parseInt($totalPage.text())) { mui.alert('已经是尾页了！'); return; } pageIndex = parseInt($totalPage.text()); loadPartInfoList({ sort : 'PART_NO', order : 'DESC', offset : (pageIndex - 1) * 10, limit : 10, brandCode : $brandCode.attr('bc'), // resultObj.BRAND_CODE $brandCode.text() partNo : $partCode.val(), partName : $partName.val() }); }); // 肇事配件查询 和 PDI检查单号 确认 $partInfoSelected.on('click', function () { let pNo = $('input[name="partSelect"]:checked').attr('pNo'); let pName = $('input[name="partSelect"]:checked').attr('pName'); let pClass = $('input[name="partSelect"]:checked').attr('pClass'); $troublePartCode.val(pNo); $troublePartName.val(pName); $troublePartClass.val(pClass); $troublePartSearch.hide(); $surfaceZone.show(); });
pageIndex在js标签的上部设置
let pageIndex = 1; // 用于肇事配件查询的变量
