MUI 上拉加载，下拉刷新

分页存储过程

IF OBJECT_ID('[usp_Sel_TableDataForMobile]') IS NOT NULL
BEGIN
  DROP PROCEDURE [dbo].[usp_Sel_TableDataForMobile]
END
GO
/*

declare @PageCount int,@RecordCount int
exec [usp_Sel_TableDataForMobile] 
  @TableName=N'表名',
  @ReturnFields=N'*',
  @PageSize=10,
  @PageIndex=1,
  @FilterString=N'筛选条件=100',
  @SortExpression=N'排序列名 DESC',
  @PageCount=@PageCount output,
  @RecordCount=@RecordCount output
  
SELECT  @PageCount as N'PageCount',@RecordCount as N'RecordCount'
*/
CREATE PROCEDURE [dbo].[usp_Common_Sel_TableDataForMobile]
  @TableName    NVARCHAR(2000),     -- 表名
  @ReturnFields NVARCHAR(1000) = '*', -- 查询列数
  @PageSize   INT = 10,       -- 每页数目
  @PageIndex    INT = 1,        -- 当前页码
  @FilterString     NVARCHAR(1000) = '',  -- 查询条件
  @SortExpression   NVARCHAR(1000),     -- 排序字段
  @PageCount    INT OUTPUT,       -- 页码总数
  @RecordCount  INT OUTPUT            -- 记录总数
  AS

--设置属性
SET NOCOUNT ON

-- 变量定义
DECLARE @TotalRecord INT
DECLARE @TotalPage INT
DECLARE @CurrentPageSize INT
DECLARE @TotalRecordForPageIndex INT

BEGIN
  IF @FilterString IS NULL SET @FilterString=N''
  IF(@FilterString<>'') SET @FilterString=N'WHERE '+@FilterString
  
  -- 记录总数
  DECLARE @countSql NVARCHAR(4000)  
  
  IF @RecordCount IS NULL
  BEGIN
    SET @countSql='SELECT @TotalRecord=Count(*) From '+@TableName+' '+@FilterString
    EXECUTE sp_executesql @countSql,N'@TotalRecord int out',@TotalRecord OUT
  END
  ELSE
  BEGIN
    SET @TotalRecord=@RecordCount
  END   
  
  SET @RecordCount=@TotalRecord
  SET @TotalPage=(@TotalRecord-1)/@PageSize+1 
  SET @CurrentPageSize=(@PageIndex-1)*@PageSize

  -- 返回总页数和总记录数
  SET @PageCount=@TotalPage
  SET @RecordCount=@TotalRecord
    
  -- 返回记录
  SET @TotalRecordForPageIndex=@PageIndex*@PageSize
  
  EXEC  ('SELECT *
      FROM (SELECT TOP '+@TotalRecordForPageIndex+' '+@ReturnFields+', ROW_NUMBER() OVER (ORDER BY '+@SortExpression+') AS PageView_RowNo
      FROM '+@TableName+ ' ' + @FilterString +' ) AS TempPageViewTable
      WHERE TempPageViewTable.PageView_RowNo > 
      '+@CurrentPageSize)
  
END
GO

/// <summary>
        /// The Common Method to get the Table's Rows
        /// </summary>
        /// <param name="tableName">表名</param>
        /// <param name="returnFields">查询列数</param>
        /// <param name="pageSize">每页数目</param>
        /// <param name="pageIndex">当前页码</param>
        /// <param name="filterString">查询条件</param>
        /// <param name="sortExpression">排序字段</param>
        /// <param name="pageCount">页码总数</param>
        /// <param name="recordCount">记录总数</param>
        /// <returns>Table、PageCount、RecordCount</returns>
        public DataTable SelectTableDataForMobile(string tableName, string returnFields, int pageSize, int pageIndex, string filterString, string sortExpression, ref  int pageCount, ref int recordCount)
        {
            string spName;
            DataTable dt = new DataTable();
            spName = "usp_Sel_TableDataForMobile";

            SqlParameter[] paras = new SqlParameter[] { 
                new SqlParameter("@TableName", SqlDbType.NVarChar, 2000),
                new SqlParameter("@ReturnFields", SqlDbType.NVarChar, 1000),
                new SqlParameter("@PageSize", SqlDbType.Int),
                new SqlParameter("@PageIndex", SqlDbType.Int),
                new SqlParameter("@FilterString", SqlDbType.NVarChar, 1000),
                new SqlParameter("@SortExpression", SqlDbType.NVarChar, 1000),
                new SqlParameter("@PageCount", SqlDbType.Int),
                new SqlParameter("@RecordCount", SqlDbType.Int)
            };

            paras[0].Value = DBMethod.GetParaValue(tableName);
            paras[1].Value = DBMethod.GetParaValue(returnFields);
            paras[2].Value = DBMethod.GetParaValue(pageSize);
            paras[3].Value = DBMethod.GetParaValue(pageIndex);
            paras[4].Value = DBMethod.GetParaValue(filterString);
            paras[5].Value = DBMethod.GetParaValue(sortExpression);
            paras[6].Value = DBMethod.GetParaValue(pageCount);
            paras[6].Direction = ParameterDirection.Output;
            paras[7].Value = DBMethod.GetParaValue(recordCount);
            paras[7].Direction = ParameterDirection.Output;

            dt = SqlHelper.ExecuteDataset(ConnectionString, CommandType.StoredProcedure, spName, paras).Tables[0];
            pageCount = Convert.ToInt32(paras[6].Value);
            recordCount = Convert.ToInt32(paras[7].Value);
            return dt;
        }

HTML代码

<div id="mui-data-contract" style="margin-top: 50px;" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <div class="apply_data"></div>
    </div>
</div>

JS代码

/*!
 * =====================================================
 * 初始化公共参数 v1.0.0  2017-11-15 Chinalzw
 * =====================================================
 */
var PageIndex = 1, PageSize = 10, PageCount = 0, RecordCount = 0, RowIndex = 1;
var FilterString = "";


/*!
 * =====================================================
 * 初始化执行函数 v1.0.0  2017-11-15 Chinalzw
 * =====================================================
 */
muiInitialize();


/*!
 * =====================================================
 * mui下拉刷新 v1.0.0  2017-11-15 Chinalzw
 * =====================================================
 */
function muiInitialize() {
    mui.init({
        pullRefresh: {
            container: "#mui-data-contract",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等(要改#mui-data-contract)
            up: {
                height: 50,//可选.默认50.触发上拉加载拖动距离(不用改)
                auto: false,//可选,默认false.自动上拉加载一次(不用改)
                contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容(不用改)
                contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；(不用改)
                callback: pullFreshUpContractCallBack //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；(不用改)
            },
            down: {
                style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式(不用改)
                color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色(不用改)
                height: 50,//可选,默认50px.下拉刷新控件的高度,(不用改)
                offset: 0, //可选 默认0px,下拉刷新控件的起始位置(不用改)
                auto: false,//可选,默认false.首次加载自动上拉刷新一次(不用改)
                contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容(不用改)
                callback: pullFreshDownContractCallBack //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；(不用改)
            }
        }
    });

    //显示正在加载...
    if (mui.os.plus) {
        mui.plusReady(function () {
            setTimeout(function () {
                mui('#mui-data-contract').pullRefresh().pullupLoading();(要改#mui-data-contract)
            }, 1000);

        });
    } else {
        mui.ready(function () {
            mui('#mui-data-contract').pullRefresh().pullupLoading();(要改#mui-data-contract)
        });
    }
}

//上拉加载
function pullFreshUpContractCallBack() {

    mui('#mui-data-contract').pullRefresh().refresh(true);//重置上拉加载(要改#mui-data-contract)

    //业务逻辑代码，比如通过ajax从服务器获取新数据；
    ajax取数据代码（必填分页参数PageSize: PageSize,PageIndex: PageIndex）

    //注意：(整个if不用改)
    //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
    //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
    if (PageCount > 0 && RecordCount > 0 && PageIndex < PageCount) {
        PageIndex++;
        this.endPullupToRefresh(false);
    }
    else {
        this.endPullupToRefresh(true);
    }
}

//下拉刷新
function pullFreshDownContractCallBack() {
    RowIndex = 1;
    PageIndex = 1;

    $(".apply_data").empty();//清空数据(要改)

    mui('#mui-data-contract').pullRefresh().refresh(true);//重置上拉加载(要改#mui-data-contract)

    //业务逻辑代码，比如通过ajax从服务器获取新数据；
    ajax取数据代码（必填分页参数PageSize: PageSize,PageIndex: PageIndex）

    (不用改)
    RowIndex = 11;
    PageIndex = 2;

    (整块if不用改)
    //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
    //没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
    if (PageCount > 0 && RecordCount > 0 && PageIndex < PageCount) {
        this.endPulldownToRefresh();
        this.endPullupToRefresh(false);
    }
    else {
        this.endPullupToRefresh(true);
    }
}