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数据根据需要进行变动。

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

  • 相关阅读:
    Vue学习笔记vueelementadmin 前端学习
    Vue学习笔记Vue.js2.X 学习(三)===>组件化高级
    Vue学习笔记rest_framework_jwt 学习
    Vue学习笔记Django REST framework3后端接口API学习
    Vue学习笔记Vue.js2.X 学习(一)===>基本知识学习
    Vue学习笔记Vue.js2.X 学习(二)===>组件化开发
    Vue学习笔记Windows系统Git安装(按装vueelementadmin报错)
    跑马灯
    使用信号量的线程同步实验
    按键盘数码管显示实验
  • 原文地址:https://www.cnblogs.com/xiaowangxiao/p/12969370.html
Copyright © 2011-2022 走看看