第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

從后臺(tái)一次查詢(xún)所有數(shù)據(jù),在前端用js進(jìn)行分頁(yè)處理,不再次走數(shù)據(jù)庫(kù)

標(biāo)簽:
Java Html/CSS JavaScript

此功能是写广西河池项目写出来的,特此记录下来供自己和研发同事有这样需求查看和借鉴,共勉之。
分页插件是:jquery.pagination.js,pagination.css
注意:jquery.pagination.js这个js一定要放在jquery的js文件下面,不然页面不出现分页
html代码:

<%--显示查询数据div--%>
<div class="main"></div>
            <%--分页div--%>
                    <dvi id="page">
                        <div style="float: left;width: 50%; margin: 0 0 10px 25px">
                            显示第 <span id= "startPageNumber"> 1</span> 到第<span id= "endPageNumber"> 10</span> 条记录,总共 <span id="taTalDataNumber"></span> 条记录  每页显示
                            <select id ="selectPage" onchange="select()" style="width: 9%">
                                <option value="3" selected>3</option>
                                <option value="6">6</option>
                                <option value="14">14</option>
                                <option value="100">100</option>
                            </select>
                            条记录
                        </div>
                        <%--分页控件div--%>
                        <div class="M-box" style="float: right"></div>
                    </dvi>

把这段代码放大你空白页面中。效果是:
图片描述
这事没有加入上面提到js前的效果。
js代码:

/**
 * 显示每页开始数据到结束数据编号
 * @param currentPage 当前页数(第一次查询最好是【1】)
 */
var fileData;
function showDataNumber(currentPage){
    var endNumber =currentPage * $("#selectPage").val();
    $("#endPageNumber").text(" "+endNumber);
    var startNumber = (currentPage-1)*$("#selectPage").val()+1
    $("#startPageNumber").text(" "+startNumber);
    if(fileData == null ){
        $("#taTalDataNumber").text(" "+0);
    }else{
        $("#taTalDataNumber").text(" "+fileData.length);
    }
}

这段代码中【fileData 】存储着从后台查询出来的所有数据,数据格式JSON,我把它写到全局里面了
fileData格式是:
图片描述
在显示下数据中对象的属性有哪些:
图片描述
接下来是获取每页数据

/**
 * 获取本页数据
 * @param currentPage 当前页数 【初次查数据,默认第1页】
 */
function getPageData(currentPage){
    if (typeof (fileData) != "undefined" &&  fileData != null) {
        //计算每页数据起始和终止数据编号
        var pageNumber = $("#selectPage").val()
        var maxLength = currentPage * pageNumber - 1;
        var minLength = currentPage * pageNumber - pageNumber;
        var pageData = [];
        for (var i = minLength; i < fileData.length; i++) {
            if (maxLength < i) {
                break;
            } else {
                pageData.push(fileData[i]);
            }
        }
        htmlData(pageData);
    }else{
        //把空数据传到页面中去
        htmlData(fileData);
    }
}

代码中的函数【htmlData(pageData)】是把处理后的数据写到页面中去,是我在js中拼接的html代码(显low了点)

function htmlData(fileDataS){
    $(".main").html("");
    if(fileDataS == null){
        $(".main").html("");
        $('.M-box').hide();
    }else{
        $('.M-box').show();
        $.each(fileDataS,function (index,file){
            var html = '<div class="gis_downloadmian"><span class="gis_word">'+file.fileName+'</span>' +
                ' 所属项目:'+file.projectId+
                ' 下载次数:【下载<a class="gis_color" id="down'+file.id+'">'+file.downloadNumber+'</a>次】' +
                ' 所属文件库:建设批复文件' +
                ' 项目年份:2016' +
                ' 更新时间:'+dateHandle(file.createtime) +
                '<a onclick="downloadFile('+file.id+')" class="gis_downbtn" >下载</a></div>'
            $(".main").append(html);
        });
    }
}

其中的html标签中class引用的是本公司内部的样式,借鉴的可以把它们删除掉
大招来了,初始化分页数据

/**
 * 分页控件处理
 */
function page() {
    if (typeof (fileData) != "undefined" &&  fileData != null) {
        var totalData = fileData.length;
        var showData = $("#selectPage").val();
        if(showData > totalData){
            showData = totalData;
        }
        $('.M-box').pagination({
            totalData: totalData,
            showData: showData,
            coping: true,
            callback: function (index) {
                //改变显示开始和结束数据编号
                showDataNumber(index.getCurrent());
                getPageData(index.getCurrent());
            }
        });
    }
}

还有一个下拉选择框没有写

/**
 * 选择每页显示数据条数
 */
function select(){
    $("#endPageNumber").text(" "+$("#selectPage").val())
    initSelect();
}
/**
 * 初始化选择每页显示数据
 */
function initSelect(){
    showDataNumber(1);
    getPageData(1);
    page();
}

每次选择每页显示数据都会跳转第一页,然后在计算分页数据和每页显示的条数
在来张成功的图片

$.ajax({
        url: '',
        type: 'POST',
        data:'',
        dataType: "json",
        success:function (data){
            fileData =data;
            console.log(fileData);
            showDataNumber(1);//初始化每页到开始到结束数据编号
            getPageData(1);//初始化第一页的数据
            page();//初始化分页
        }
    });

传自己的url和数据吧,提交方式不限
图片描述
图片描述
到此这个在js分页写完了,在各位前端工程师,使用过程中出现的错误,请及时告诉我,我有空闲时间尽最大的努力帮助你们解决。有好多在使用我这个例子的开发人员都反馈分页出来或是有问题,在这里把我在这个例子中使用分页插件贡献出来,http://pan.baidu.com/s/1b6yR1O

點(diǎn)擊查看更多內(nèi)容
16人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消