zoukankan      html  css  js  c++  java
  • ajax和pagination实现动态分页的原生方法

    <style>

    /**分页样式*/
    .l-page{
    margin-top: 30px;
    margin-bottom: 55px;
    text-align: center;
    }
    .l-page .ui-pagination-container .ui-pagination-page-item.active{
    background-color: #2771ff;;
    border:1px solid #2771ff;
    color: #fff;
    }
    .l-page .ui-pagination-container .ui-pagination-page-item{
    margin: 0 3px;
    padding: 4px 14px;
    border:1px solid #dddddd;
    color: #636363;
    font-size: 14px;
    border-radius: 2px;
    text-decoration: none;
    }
    .l-page .ui-pagination-container .ui-pagination-page-item:hover{
    color: #636363;
    }
    .l-page .ui-pagination-container .ui-pagination-page-item.active:hover{
    color: #fff;
    }
    ul{
    margin-left: 160px;
    list-style: none;
    }
    ul li{
    margin-bottom: 15px;
    }
    ul li span{
    display: inline-block;
    }
    ul li span:first-child{
    150px;
    }
    </style>

    <!--数据展示-->
    <div id="mainContent"> 

    </div>
    <!--分页页码-->
    <div class="l-page" id="pagination">
    
    </div>
    
    <script> $(function() { queryNewsList(1,0); }); /*分页查询*/ function queryNewsList(page,offset){ /*每页展示条数,默认8条*/ var limit = 8; $.ajax({ cache: false, type: "post", url:"", data:{ /*当前页码*/ page:page, limit:limit, /*每页的偏移量(本页当前有多少条)*/ offset:offset, /*排序字段名称*/ sort:"", order:"desc" }, async: false, dataType:"json", error: function(request) { }, success: function(data) { $("#pagination").pagination({ /*当前页码*/ currentPage: page, /*总页数*/ totalPage: Math.ceil(data.total/limit),//data.pages /*是否显示首页、尾页 true:显示 false:不显示*/ isShow:true, /*分页条显示可见页码数量*/ count:5, /*第一页显示文字*/ homePageText:'首页', /*最后一页显示文字*/ endPageText:'尾页', /*上一页显示文字*/ prevPageText:'上一页', /* 下一页显示文字*/ nextPageText:'下一页', /*点击翻页绑定事件*/ callback: function(page) {
                   //records.length:当前数据总条数 queryNewsList(page,data.records.length); } });
    //console.log("offset:"+data.records.length); var html =''; $('#mainContent').html(html); } }); } </script>

    后台数据格式参考:

     

    其中ajax请求中的data数据根据需要进行变动。

    分页相关数据根据后台返回数据进行取值。

  • 相关阅读:
    HTML DOM 06 节点关系
    HTML DOM 05 事件(三)
    HTML DOM 05 事件(二)
    HTML DOM 05 事件(一)
    html DOM 04 样式
    html DOM 03 节点的属性
    html DOM 02 获取节点
    html DOM 01 节点概念
    JavaScript 29 计时器
    JavaScript 28 弹出框
  • 原文地址:https://www.cnblogs.com/xiaowangxiao/p/12969370.html
Copyright © 2011-2022 走看看