js 拉取所有数据，前端进行分页处理

最新推荐文章于 2024-05-11 21:58:00 发布

hhhhh--hhhhh

最新推荐文章于 2024-05-11 21:58:00 发布

阅读量9.1k

点赞数

分类专栏：假分页文章标签： js 前端对所有数据分页假分页

假分页专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拉取所有数据，前端进行分页处理</title>
</head>
<body>
<div>
    <div>
        <table id="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
            </tr>

            </thead>
            <tbody id="temp1-container">
            <script id="temp1" type="text/template">
                <% for(var k in data){ %>
                <tr>
                    <td><%=Number(k)+1%></td>
                    <td><%=data[k].1%></td>
                    <td><%=data[k].2%></td>
                    <td><%=data[k].3%></td>
                    <td><%=data[k].4%></td>
                    <td><%=data[k].5%></td>
                    <td><%=data[k].6%></td>
                    <td><%=data[k].7%></td>
                    <td><%=data[k].8%></td>
                    <td><%=data[k].8%></td>
                </tr>
                <%}%>
            </script>
            </tbody>
        </table>

        <span style="width:350px;">
            <a href="#" οnclick="page.prePage();">上一页</a>/<a href="#" οnclick="page.nextPage();">下一页</a>
            <span id="divFood"></span>


            第<input id="pageno" value="1" style="width:20px"/>页
            <a href="#" οnclick="page.aimPage();">跳转</a></span>
        </span>

    </div>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/table-more-page.js"></script>
<script src="js/ejs.min.js"></script>

<script>
    function pageNum() {
        page = new Page(1,'table','temp1-container');//参数含义：每页显示条数；table的id;tbody的id
    }
    var tem1=document.getElementById("temp1").innerHTML;//表格数据
    function getPageData(page) {//从后台拉取数据后再使用模板引擎-e.js
        $.ajax({
            type: "POST",
            url: "接口地址",
            data:{},
            success:function (data) {
                var html1=ejs.render(tem1,{data:data.enterpriseList});
                document.getElementById("temp1-container").innerHTML = html1;
                pageNum();//将数据进行分页

            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(JSON.parse(XMLHttpRequest.responseText).msg);
            }
        });
    }
    getPageData();
</script>

</html>


//table-more-page.js


function Page(iAbsolute,sTableId,sTBodyId,page)
{
    this.absolute = iAbsolute; //每页最大记录数
    this.tableId = sTableId;
    this.tBodyId = sTBodyId;
    this.rowCount = 0;//记录数
    this.pageCount = 0;//页数
    this.pageIndex = 0;//页索引
    this.__oTable__ = null;//表格引用
    this.__oTBody__ = null;//要分页内容
    this.__dataRows__ = 0;//记录行引用
    this.__oldTBody__ = null;
    this.__init__(); //初始化;
};
/**//*
 初始化
 */
Page.prototype.__init__ = function(){
    this.__oTable__ = document.getElementById(this.tableId);//获取table引用
    this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
    this.__dataRows__ = this.__oTBody__.rows;
    this.rowCount = this.__dataRows__.length;
    try{
        this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute;
        this.pageCount = parseInt(this.rowCount%this.absolute == 0
            ? this.rowCount/this.absolute : this.rowCount/this.absolute+1);
    }catch(exception){}
    this.__updateTableRows__();
};
Page.prototype.GetBar=function(obj)
{
    var bar= document.getElementById(obj.id);
    bar.innerHTML= "每页"+this.absolute+"条/页"+this.rowCount+"条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页
}
/**//*
 下一页
 */
Page.prototype.nextPage = function(){
    if(this.pageIndex + 1 < this.pageCount){
        this.pageIndex += 1;
        this.__updateTableRows__();
    }
};
/**//*
 上一页
 */
Page.prototype.prePage = function(){
    if(this.pageIndex >= 1){
        this.pageIndex -= 1;
        this.__updateTableRows__();
    }
};
/**//*
 首页
 */
Page.prototype.firstPage = function(){
    if(this.pageIndex != 0){
        this.pageIndex = 0;
        this.__updateTableRows__();
    }
};
/**//*
 尾页
 */
Page.prototype.lastPage = function(){
    if(this.pageIndex+1 != this.pageCount){
        this.pageIndex = this.pageCount - 1;
        this.__updateTableRows__();
    }
};
/**//*
 页定位方法
 */
Page.prototype.aimPage = function(){
    var abc = document.getElementById("pageno");
    var iPageIndex = abc.value;
    var iPageIndex = iPageIndex*1;
    if(iPageIndex > this.pageCount-1){
        this.pageIndex = this.pageCount -1;
    }else if(iPageIndex < 0){
        this.pageIndex = 0;
    }else{
        this.pageIndex = iPageIndex-1;
    }
    this.__updateTableRows__();
};
/**//*
 执行分页时，更新显示表格内容
 */
Page.prototype.__updateTableRows__ = function(){
    var iCurrentRowCount = this.absolute * this.pageIndex;
    var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;
    var tempRows = this.__cloneRows__();
    var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
    var newTBody = document.createElement("TBODY");
    newTBody.setAttribute("id", this.tBodyId);
    for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){
        newTBody.appendChild(tempRows[i]);
    }
    this.__oTable__.appendChild(newTBody);
    this.__dataRows__ = tempRows;
    this.__oTBody__ = newTBody;
//页脚显示分
    var divFood = document.getElementById("divFood");//分页工具栏
    divFood.innerHTML="";
    var rightBar = document.createElement("divFood");
    rightBar.setAttribute("display","");
    rightBar.setAttribute("float","left");
    rightBar.innerHTML="第"+(this.pageIndex+1)+"页/共"+this.pageCount+"页";
    var isOK="Y";
    var cssColor="";
    divFood.appendChild(rightBar);
页脚显示分页结
};
/**//*
 克隆原始操作行集合
 */
Page.prototype.__cloneRows__ = function(){
    var tempRows = [];
    for(var i=0; i<this.__dataRows__.length; i++){
        tempRows[i] = this.__dataRows__[i].cloneNode(1);
    }
    return tempRows;
};





可能是原文的地址:可能是原文