修复前端分页bug

wangrong

2022-11-21 8edfc33511b93df539e1c5515b696f62f2c0e8f8

修复前端分页bug

 widgetsTS/widget_search/view.js

@@ -4,6 +4,7 @@
var current_selected_monitor_qindex = "pm25";

var tableData;
var monitor_type_changed = false;

//对应widget.js中MyWidget实例化后的对象
var thisWidget
@@ -17,6 +18,9 @@
    $(".cnt_div a").on("click", function () {
        $(".cnt_div a").removeClass("select_btn"); 
        $(this).addClass("select_btn");
        if (current_selected_monitor_type && current_selected_monitor_type != $(this).attr("_code")) {
            monitor_type_changed = true;
        }
        current_selected_monitor_type = $(this).attr("_code");
        current_selected_monitor_name = $(this).attr("_name");  
        changeQindexSelection();
@@ -153,6 +157,10 @@
function reloadData(page){
    $("#searchInfo").empty();
    var avgnam = 30; //每页显示个数
    if (!monitor_type_changed && tableData) {
        pageData(tableData, avgnam, page)
        monitor_type_changed = false;
    } else {
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list_keyword&datatype=" + thisWidget.datatype 
            + "&datatime=" + thisWidget.datatime +"&userid=" + thisWidget.userid+ "&qindex=" + current_selected_monitor_qindex 
            + "&keyword=" + current_selected_monitor_keyword + "&pageno="+page+"&pagesize="+avgnam;
@@ -174,105 +182,10 @@
                haoutil.msg("无查询结果，请更换查询条件！")
                return;
            }          
            var newsTotalNum = data.data.result.length; //记录的总条数
            console.log(data.data,"所有数据")
            var pageNum = Math.ceil(newsTotalNum/avgnam); //分页的总页数
            
            for(var i=0;i<tableData.length;i++){
                var j = (page-1)*avgnam + i + 1;
                var topObj = tableData[i];
                topObj = changeNullAndundefinedToEmpty(topObj);
                var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input id='items' type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
                $("#searchInfo").append(content);
            }
            var content1 = '<div class="am-cf">' +
                '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
                '</div>';
            var content2 = '<div class="pageDiv">' + 
            '<ul class="am-pagination">';
            // 判断前面是否还有页面
            if(page == 1){
                content2 += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';
            }else{
                content2 += '<li><a href="javascript:reloadData('+(page-1)+')" rel="external nofollow" >«</a></li>';
            }
            if (pageNum <= 3 ) {//总页数小于五页，则加载所有页                
                for (var i=1; i <= pageNum; i++) {
                    if (i == page) {
                        content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                    }else{
                        content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                    }
                };
                $('#page').append(content2);
                // return;
            }else if (pageNum > 3) {//总页数大于五页，则加载五页
                if (page < 3) {//当前页小于3，加载1-3页
                    for (var i=1; i <= 3; i++) {
                        if (i == page) {
                            content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                        }else{
                            content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                        }
                    };
                    if (page <= pageNum-2) {//最后一页追加“...”代表省略的页
                        content2 += "<li><a>...</a></li>";
                    }
                    $('#page').append(content2);
                    // return;
                }else if (page >= 3) {//当前页大于3页
                    for (var i=1; i <= 2; i++) {//1,2页码始终显示
                        content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                    }
                    content2 += "<li><a>...</a></li>";//2页码后面用...代替部分未显示的页码
                    if (page+1 == pageNum) {//当前页+1等于总页码
                        for(i = page-1; i <= pageNum; i++){//“...”后面跟三个页码当前页居中显示
                            if (i == page) {
                                content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                            }else{
                                content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                            }
                        }
                    }else if (page == pageNum) {//当前页数等于总页数则是最后一页页码显示在最后
                        for(var i = page-2; i <= pageNum; i++){//...后面跟三个页码当前页居中显示
                            if (i == page) {
                                content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                            }else{
                                content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                            }
                        }
                    }else{//当前页小于总页数，则最后一页后面跟...
                        for(var i = page-1; i <= page+1; i++){//dqPage+1页后面...
                            if (i == page) {
                                content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                            }else{
                                content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                            }
                        }
                        content2 += "<li><a>...</a></li>";
                    }
                    $('#page').append(content2);
                    // return;
                }
            }
            // 判断后面是否还有页面
            if(page == pageNum){
                content2 += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';
            }else{
                content2 += '<li><a href="javascript:reloadData('+(page+1)+')" rel="external nofollow" >»</a></li>';
            }
            content2 += '</ul>' +
                  '</div>';
            $("#pageID").empty();
            $("#pageID").append(content1);
            $("#page").empty();
            $("#page").append(content2);
                pageData(tableData, avgnam, page);
          }
        });
    }
    }

      function over(obj) {
@@ -327,3 +240,100 @@
            thisWidget.HighlightMulti(current_selected_monitor_type, current_selected_monitor_qindex, selectedItem);
        }
    }

function pageData(tableData, avgnam, page) {
    var newsTotalNum = tableData.length; //记录的总条数
    var pageNum = Math.ceil(newsTotalNum / avgnam); //分页的总页数

    for (var i = (page - 1) * avgnam; i < Math.min(page * avgnam, newsTotalNum); i++) {
        var j = i + 1;
        var topObj = tableData[i];
        topObj = changeNullAndundefinedToEmpty(topObj);
        var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input id='items' type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
        $("#searchInfo").append(content);
    }
    var content1 = '<div class="am-cf">' +
        '共 ' + newsTotalNum + ' 条记录 / ' + pageNum + '页' +
        '</div>';
    var content2 = '<div class="pageDiv">' +
        '<ul class="am-pagination">';
    // 判断前面是否还有页面
    if (page == 1) {
        content2 += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';
    } else {
        content2 += '<li><a href="javascript:reloadData(' + (page - 1) + ')" rel="external nofollow" >«</a></li>';
    }
    if (pageNum <= 3) {//总页数小于五页，则加载所有页                
        for (var i = 1; i <= pageNum; i++) {
            if (i == page) {
                content2 += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
            } else {
                content2 += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
            }
        };
        $('#page').append(content2);
        // return;
    } else if (pageNum > 3) {//总页数大于五页，则加载五页
        if (page < 3) {//当前页小于3，加载1-3页
            for (var i = 1; i <= 3; i++) {
                if (i == page) {
                    content2 += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';

                } else {
                    content2 += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
                }
            };
            if (page <= pageNum - 2) {//最后一页追加“...”代表省略的页
                content2 += "<li><a>...</a></li>";
            }
            $('#page').append(content2);
            // return;
        } else if (page >= 3) {//当前页大于3页
            for (var i = 1; i <= 2; i++) {//1,2页码始终显示
                content2 += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
            }
            content2 += "<li><a>...</a></li>";//2页码后面用...代替部分未显示的页码
            if (page + 1 == pageNum) {//当前页+1等于总页码
                for (i = page - 1; i <= pageNum; i++) {//“...”后面跟三个页码当前页居中显示
                    if (i == page) {
                        content2 += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
                    } else {
                        content2 += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
                    }
                }
            } else if (page == pageNum) {//当前页数等于总页数则是最后一页页码显示在最后
                for (var i = page - 2; i <= pageNum; i++) {//...后面跟三个页码当前页居中显示
                    if (i == page) {
                        content2 += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
                    } else {
                        content2 += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
                    }
                }
            } else {//当前页小于总页数，则最后一页后面跟...
                for (var i = page - 1; i <= page + 1; i++) {//dqPage+1页后面...
                    if (i == page) {
                        content2 += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';

                    } else {
                        content2 += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
                    }
                }
                content2 += "<li><a>...</a></li>";
            }
            $('#page').append(content2);
            // return;
        }
    }
    // 判断后面是否还有页面
    if (page == pageNum) {
        content2 += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';
    } else {
        content2 += '<li><a href="javascript:reloadData(' + (page + 1) + ')" rel="external nofollow" >»</a></li>';
    }
    content2 += '</ul>' +
        '</div>';
    $("#pageID").empty();
    $("#pageID").append(content1);
    $("#page").empty();
    $("#page").append(content2);
}