MVC下的分页代码（MVC+Webservice）

首先声明，这是网上找的代码加上了一些自己的理解，为了让初学者少走一些弯路，我是利用三层架构WebApi传值+MVC实现的简单分页控件

下面是正文

Model

//这个model类是为了存储总数和所有的数据，一起传到前台

public class PagingModels<T> where T:class,new()
{
/// <summary>
/// 数据
/// </summary>
public T tb { get; set; }
/// <summary>
/// 总数
/// </summary>
public int Total { get; set; }
}

DAL

/// <summary>
/// 带存储过程并且分页的查询
/// </summary>
/// <param name="procName">存储过程的名称</param>
/// <param name="Total">输出总数</param>
/// <param name="sqlParameters">参数</param>
/// <returns>返回Dataset</returns>
public DataSet Query(string procName, ref int Total,SqlParameter[] sqlParameters)
{
//定义一个dataset类型
DataSet dataSet = new DataSet();
//连接数据库
using (SqlConnection connection = new SqlConnection(con))
{
//打开数据库
connection.Open();
//封装执行的sql语句
using (SqlCommand command = new SqlCommand(procName, connection))
{
//将存储过程的输入参数放到comand中
command.Parameters.AddRange(sqlParameters);
//指定执行的是存储过程
command.CommandType = CommandType.StoredProcedure;
//使用适配器关联command
SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(command);
//适配器填充数据
sqlDataAdapter.Fill(dataSet);
//获取输出参数
Total=int.Parse(command.Parameters["@Total"].Value.ToString());
}
}
return dataSet;
}

BLL

/// <summary>
/// 返回分页的存储过程查询的结果
/// </summary>
/// <param name="Total">总数</param>
/// <param name="pageSize">每页显示的个数</param>
/// <param name="pageNumber">页数</param>
/// <param name="where">条件</param>
/// <param name="field">字段</param>
/// <returns>DataTable</returns>
public DataTable GetPagingDept(ref int Total, int pageSize, int pageNumber, string where, string field)
{
SqlParameter[] sqlParameters = new SqlParameter[]
{ 
new SqlParameter {ParameterName= "@table", Value= " /*这是需要的表名*/ ",SqlDbType= SqlDbType.NVarChar,Direction= ParameterDirection.Input, Size=200},
new SqlParameter {ParameterName= "@field", Value= field,SqlDbType= SqlDbType.NVarChar,Direction= ParameterDirection.Input, Size=2000 },
new SqlParameter {ParameterName= "@where", Value= where ,SqlDbType= SqlDbType.NVarChar,Direction= ParameterDirection.Input, Size=2000},
new SqlParameter {ParameterName= "@order", Value= " /*需要排序的Id*/ " ,SqlDbType= SqlDbType.NVarChar,Direction= ParameterDirection.Input, Size=200},
new SqlParameter {ParameterName= "@pageSize", Value=pageSize ,SqlDbType= SqlDbType.Int,Direction= ParameterDirection.Input},
new SqlParameter {ParameterName= "@pageNumber", Value=pageNumber ,SqlDbType= SqlDbType.Int,Direction= ParameterDirection.Input},
new SqlParameter {ParameterName= "@Total" ,SqlDbType= SqlDbType.Int,Direction= ParameterDirection.Output}
};
return helper.Query("[/*存储过程名称*/]", ref Total, sqlParameters).Tables[0];
}

WebApi控制器

//一定记得配置跨域 
[HttpGet]
        [Route("api/Show")]
        public IHttpActionResult ShowList(int pageNumber,int pageSize)
        {
//定义变量
            int Total = 0;
           //接收从BLL传过来的值
            DataTable table = bll.ShowList(pageNumber, pageSize, “ 1=1 ”, " * ", ref Total);
//因为table是一个集合，而传值只能传一个，我们还需要获取总数，所以需要一个类来另外处理
            PagingModel<DataTable> paging = new PagingModel<DataTable> { tb = table, Total = Total };
//返回值
            return Ok(paging);
        }

MVC视图页

    <input type="button" id="FirstNum" value="首页" />
    <input type="button" id="PrevNum" value="上一页" />
    <input type="button" id="NextNum" value="下一页" />
    <input type="button" id="EndNum" value="尾页" />

<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Content/jquery-3.3.1.min.js"></script>

<script>
    //定义初始值
    var pageSize = 3;//一页显示的个数
    var pageNumber = 1;//页数
    var Total = 0;//总数
//页面加载事件
    $(function () {
　　　　　　//调用方法
        ShowList(pageNumber);
    })

    function ShowList(pageNumber) {

        $.ajax({
            url: "",//这是WebApi的链接，注意数据与数据之间用&连接
            
            dataType: "json",
            type: "get",
            success: function (result) {

               //获取到总行数
                Total = result.Total;
            }
        })

    }

  //计算总页数
    function GetMath() {
        var math = Total / pageSize;
        return Math.ceil(math);
    }
//首页
    $("#FirstNum").click(function () {
        pageNumber = 1;
        ShowList(pageNumber,);
    })
    //上一页
    $("#PrevNum").click(function () {
        if (pageNumber - 1 <= 0) {
            alert("已经是第一页了");
            return;
        } else {
            pageNumber = pageNumber - 1;
        }

        ShowList(pageNumber,);
    })
    //下一页
    $("#NextNum").click(function () {
          if (pageNumber  >= GetMath()) {
            alert("已经是最后一页了");
              return;
          } else {
              pageNumber = pageNumber + 1;
          }
        
        ShowList(pageNumber);
     })
　　　//尾页
    $("#EndNum").click(function () {
        pageNumber = GetMath();
        ShowList(pageNumber);
    })

    
</script>