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

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

  • 相关阅读:
    基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
    require.js实现js模块化编程(二):RequireJS Optimizer
    require.js实现js模块化编程(一)
    树型权限管理插件:jQuery Tree Multiselect详细使用指南
    表格组件神器:bootstrap table详细使用指南
    后台管理系统中的重点知识大全
    Ajax最详细的参数解析和场景应用
    npm常用命令小结
    详解javascript,ES5标准中新增的几种高效Object操作方法
    git入门学习(二):新建分支/上传代码/删除分支
  • 原文地址:https://www.cnblogs.com/xiaowangxiao/p/12969370.html
Copyright © 2011-2022 走看看