Web查询并滚动显示

效果图：

1、Html页面

html文件：

<div class="body-content">  
    <table class="table table-hover text-center">                      
        <thead style = "text-align:center; background-color:#555; color:#fff;">
            <tr>                                    
                <th width="10%">aucOrgID</th>  
                <th width="10%">aucGroupId</th>  
                <th width="20%">aucItemNum</th>
                <th width="20%">aucItemCrc</th>
                <th width="50%">time</th>
            </tr>  
        </thead>
        <tbody style = "text-align:center;" id="data"></tbody>
        <tr>
            <td colspan="4">
                <div class="pagelist" id="list"> 
                    <span style="cursor:pointer;">上一页</span>    
                    <label id="curStatus"></label>
                    <span style="cursor:pointer;">下一页</span> 
                    <input id="goInput"> 
                    <span id="go" style="background-color:#03b6fd; cursor:pointer;">GO</span>
                </div>
            </td>
        </tr>
    </table>     
</div>  

2、页面查询按钮触发

html文件：

            <div class="border-bottom">
                <table class="table table-hover text-center">
                    <tr>   
                    
                        <td width="30%" align="right"><label>org_id：</label></td>   
                        <td width="20%">
                            <input class="input w50" style="height:30; padding:5px 10px; width:100%" id="input_org_id"/>         
                        </td>                
                        <td width="50%">
                            <a class="button border-main icon-search" style="height:30; padding:5px 10px; cursor:pointer;float:left" onclick="query()">  query white list</a>
                        </td> 
                    </tr>
                </table>   
            </div> 

    <script>            
        var isClick = true;
        function query() {  
			if(isClick) {
				isClick = false;
				WhiteListQuery();  
				setTimeout(function() {
					isClick = true;
				}, 1000);
			}
        }; 
    </script> 

js文件：

function WhiteListQuery() {  
    setCurrentPage(1);
    getData();
}

3、获取数据

利用Ajax调用WEB接口查询当前需要显示的数据，JS页面

function getData() {              
    var org_id = $("#input_org_id").val();
    
    let timestamp = getTimeStamp()
    let app_id = getAppID()
    let data={
        'app_id':app_id,
        'timestamp':timestamp,    
        'org_id':org_id,
        'page_size':pageSize,
        'page_index':currentPage
    } 
    
    $.ajax(getURL() + 'query_white_list_ws.php', {
        type:'POST',
        data:{
            app_id: app_id,
            timestamp: timestamp,  
            org_id: org_id,
            page_size: pageSize,
            page_index: currentPage,
            sign: createSign(this, data)
        },
        dataType: 'json'
    }).done(function(data) {  
        showOperateResultDone('query_white_list_ws', data);
                              
        $('#data').html('');
        if (data.code === 0) {  
            show(data);
        }
    }).fail(function(xhr, status) {   
        showOperateResultFail('query_white_list_ws',xhr, status) 
    });
}

function show(data) {
    let totalPage = data.data.total_page;
    init(currentPage, totalPage);
    
    changePage(currentPage);
    
    for (var k in data.data.data)
    {
        let el = "<tr><td>" +                                          
                    data.data.data[k]['aucOrgId'] + "</td><td>" + 
                    data.data.data[k]['aucGroupId'] + "</td><td>" + 
                    data.data.data[k]['aucItemNum'] + "</td><td>" + 
                    data.data.data[k]['aucItemCrc'] + "</td><td>" +
                    data.data.data[k]['time'] + "</td></tr>";
        $('#data').append(el);
    } 
}

4、设置按钮控件，控制下面页数、下一页、跳转

$('#go').click(function() {
    let value = $('#goInput').val();
    setCurrentPage(value);
    getData();
});
$('#goInput').keydown(function(event) {
    if (event.keyCode === 13) {  
        let value = $('#goInput').val();
        setCurrentPage(value);
        getData();
    }
});

var total = 0;
var currentPage=1;
var pageSize=10;

var isInit = false;
//初始化
function init(page, num) {  
    currentPage = page;
    total = num;
    if (!isInit) {
        isInit = true;
        changePage(currentPage);
    }
}

//点击上一页，下一页是设置当前页
function setCurrentPage(page) {
    if (page > total || page < 1) {
        return false;
    }       
    currentPage = parseInt(page);
    return true;
    //console.log(currentPage) ;
}

//设置底部滚动条
function changePage(page) {
    if (page > total || page < 1) {
        return false;
    }
    
    page = parseInt(page);
    $('#goInput').val(page);  
    $('#curStatus').html(page + '/' + total);

    return true;    
}
//设置滚动条的点击事件
$('#list').on('click', 'span', function() {
    switch ($(this).text()) {
        case '上一页':{   
            setCurrentPage(currentPage - 1) && getData();//越界不调接口
            break;
        }
        case '下一页':{     
            setCurrentPage(currentPage + 1) && getData();
            break;
        }
    }
});