【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">&nbsp;</span>查询</button>
        <button type="button" id="partInfoSearchResetBtn" class="mui-btn mui-btn-red "><span class="mui-icon mui-icon mui-icon-refreshempty">&nbsp;</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>条记录&nbsp;
            当前第<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; // 用于肇事配件查询的变量