jQuery实现Table分页效果

本文实例为大家分享了jQuery实现Table分页效果的具体代码，供大家参考，具体内容如下

CSS：

HTML：

 


    
品牌
    
店铺
    
仓库



 

JavaScript：

MVC:

public ActionResult GetData(string startDate, int pageIndex, int pageSize)
        {
                string json = string.Empty;          
                if (!string.IsNullOrEmpty(startDate))
                {
                    int total = 0;
                    int allPage = 0;
                    DataTable dt = bll.GetData(startDate, pageIndex, pageSize, out total, out allPage);
                    if (dt != null && dt.Rows.Count > 1)
                    {
                        json = JsonConvert.SerializeObject(new
                        {
                            total = total,//总记录数
                            allPage = allPage,//总页数
                            data = dt,//分页后数据
                        });
                    }
                }        
                return Content(json);
        }

获得分页数据dataTable、总数据数total、总页数allpage：

public DataTable GetDate(string startDate, int pageIndex, int pageSize, out int total, out int allPage)
{
    //计算总数据数 和 总分页数
    string sqlCount = "select count(*) from table where date='"+startDate+"'";//获取数据总数
    total = int.Parse(SqlHelper.GetSingel(sqlCount ).ToString());//总数据行数
    allPage = total / pageSize;//总分页个数 = 总数据行数 / 每页行数 
    allPage += total % pageSize == 0 ? 0 : 1;//不足一页也算一页
    
    //获取分页数据
    string sql = "";
    sql = "DECLARE @PageIndex INT;";
    sql = "DECLARE @PageSize INT;";
    sql = "SET @PageIndex=" + pageIndex;
    sql = "SET @PageSize=" + pageSize;
 
    sql += " SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY ID desc) rownum, * FROM table where date ='"+ startDate +"')a";
    sql += " WHERE rownum > @PageSize * (@PageIndex - 1) AND rownum <= @PageSize * @PageIndex";
    sql += " order by ID desc";
 
    DataTable dt = SqlHelper.GetDate(sql);//分页数据
    return dt;
}

预览：

点击页码会重新调用ajax获取新的数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。