MUI分頁

时间:2025-03-29 08:29:39
  • <html>
  • <head>
  • <title></title>
  • <link href="/mui/3.7.1/css/" rel="stylesheet">
  • <script src="/jquery/1.11.3/"></script>
  • <script src="/mui/3.7.1/js/"></script>
  • </head>
  • <body>
  • <!--下拉刷新容器-->
  • <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  • <div class="mui-scroll">
  • <!--数据列表-->
  • <ul class="mui-table-view mui-table-view-chevron" id="list">
  • </ul>
  • </div>
  • </div>
  • </body>
  • <script type="text/javascript" charset="utf-8">
  • var pager = {
  • pageCur : 0,
  • pageSize : 10
  • };//分页
  • var totalPage;//总页码
  • pullRefresh(pager);//启用上拉下拉
  • function pullRefresh(){
  • mui("#refreshContainer").pullRefresh({
  • up:{
  • contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
  • contentnomore:'没 有 更 多 数 据 了',//可选,请求完毕若没有更多数据时显示的提醒内容;
  • callback:function(){//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  • window.setTimeout(function(){
  • getData(pager);
  • },500);
  • }
  • },
  • down : {
  • height:50,//可选,默认50.触发下拉刷新拖动距离,
  • auto: true,//可选,默认false.首次加载自动下拉刷新一次
  • contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
  • contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
  • contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
  • callback :function(){ //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  • window.setTimeout(function(){
  • pager['pageSize']= 3;//条数
  • pager['pageCur'] = 0;//页码
  • //刷新要先清空父节点里面的子节点
  • var f = document.getElementById("list");
  • var childs = f.childNodes;
  • for(var i = childs.length - 1; i >= 0; i--) {
  • f.removeChild(childs[i]);
  • }
  • getData(pager);
  • },500);
  • }
  • }
  • })
  • }
  • //这个方法是负责向接口请求数据的,你可以选择你喜欢的方式,我这里是直接用的
  • function getData(params){
  • $.ajax({
  • type : "post",
  • url : "http://app./rzun//AppCustomer/queryCustomer",
  • // url : "http://192.168.3.253:8080/rzun/AppCustomer/addCustomerCallLog",
  • data : {
  • suid : 18,
  • // pageCur : 0,
  • pageSize : params,
  • time : 2,
  • type : 0,
  • search : ""
  • },
  • dataType : 'json',
  • success : function(data) {
  • }
  • });
  • }
  • </script>
  • </html>