客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
JQuery.pagination这款分页控件非常好用，可实现无刷新分页，为了方便下次做项目便于拷贝，所以在此发布一下，具体的实现流程如下： 效果图：
JQuery.pagination的各个参数的说明如下：
四、参数
首先新建JQueryPage.aspx页面引入js文件和css文件，至于这两个文件下载的话，网上一大把，找不到也可以QQ我，我发给你.. <!--分页所需要的css文件-->
<link href="css/pagination.css" type="text/css" rel="stylesheet" />
<!--分页所需要的js文件-->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
JQueryPage.aspx页面html代码如下： <form id="form1" runat="server"> <div> 下面来讲解一下实现过程， $("#Pagination").pagination(<%=pageCount%>, { callback: PageCallback,//回调函数 prev_text: '上一页',//前一页显示的文本文字，字符串参数，可选，默认是"Prev" next_text: '下一页',//下一页显示的文本文字， 字符串参数，可选，默认是"Next" items_per_page: pageSize,//每页显示的条目数,已经设置为10条 num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10 current_page: pageIndex,//当前页 num_edge_entries: 1//两侧显示的首尾分页的条目数 }); 以上这段代码会让分页按钮显示出来，
///回调函数，当点击链接翻页的时候此函数被调用，此函数接受两个参数，新一页的索引和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行 function PageCallback(index, jq) { $("#toPage").val(index+1);//在点击分页按钮翻页的时候，输入框跳转的值也跟随变化 Init(index); } 以上这段代码是在点击分页按钮进行翻页的时候调用的，回调函数
///提交数据 ///提交数据 以上这段代码是post到后台获取数据返回页面的核心，
关于我增加的跳转按钮代码如下：
//输入框跳转按钮 $("#BtntoPage").click(function(){ var $topageindex = $("#toPage").val();//获取输入框的跳转值 var $reg_check= /^[-+]?\d+$/;//验证非数字正则表达式 if($reg_check.test($topageindex)) { //计算出总页数，计算方法为：（总记录数+每页显示数-1)/每页显示数 var $totalPage = ((parseInt(<%=pageCount%>)+pageSize-1)/pageSize); if(parseInt($topageindex)<1||parseInt($topageindex)>$totalPage) { alert("无效页码！！超出页码索引值！！！"); }else { alert("正在为您跳转第:"+$topageindex+"页......."); ///加入这段，主要实现分页按钮的改变选中样式 $("#Pagination").pagination(<%=pageCount%>, { callback: PageCallback,//回调函数 prev_text: '上一页',//前一页显示的文本文字，字符串参数，可选，默认是"Prev" next_text: '下一页',//下一页显示的文本文字， 字符串参数，可选，默认是"Next" items_per_page: pageSize,//每页显示的条目数,已经设置为10条 num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10 current_page: $topageindex-1,//注意，这里的当前页码改为了，文本框输入的值-1，页码是从0开始，所以要减1 num_edge_entries: 1//两侧显示的首尾分页的条目数 }); Init($topageindex-1); } }else { alert("只能输入数字！！！！"); $("#toPage").focus().select(); } }) })
筛选代码如下:
/// 筛选查询
$("#selectednews").change(function(){
$("#Pagination").pagination(<%=pageCount%>, {
callback: PageCallback,//回调函数
prev_text: '上一页',//前一页显示的文本文字，字符串参数，可选，默认是"Prev"
next_text: '下一页',//下一页显示的文本文字， 字符串参数，可选，默认是"Next"
items_per_page: pageSize,//每页显示的条目数,已经设置为5条
num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10
current_page: pageIndex,//当前页
num_edge_entries: 1//两侧显示的首尾分页的条目数
});
$("#pageSize").text(pageSize);//每页显示条数
$("#DataSum").text(<%=pageCount%>); //总记录数
$("#toPage").val(1);//初始化页面，跳转框默认为1
Init(pageIndex);
})
再来看后台接收PageIndex和pageSize这两个参数是如何处理的。。。。
public partial class JQueryPage : System.Web.UI.Page { public int pageCount = 0;//数据库总记录数 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { pageCount = GetTotalPage();//获取数据库总条数
先定义public int pageCount = 0;//数据库总记录数，用于前台<%=pageCount%>获取数据总记录数， 页面加载的时候 pageCount = GetTotalPage();//获取数据库总条数 然后在判断两个参数是否为空。。。。if (Request["pageIndex"] != null && Request["pageSize"] != null)
// <summary>
重要的是这个方法，根据分页查询语句进行数据库查询出需要的数据，然后用StringBuilder进行表格拼接，最后返回输出到页面, 关于SqlHelper类，也没什么主要用它来记录了数据库连接字符串，和一些经常使用的查询语句，代码如下：
public class SqlHelper { //private static Hashtable parmCache = Hashtable.Synchronized(new Hashtable()); public static string staticConnectionString = System.Configuration.ConfigurationManager.AppSettings["connectionString"]; /// <summary> /// 获取连接字符串 /// </summary> public static string ConnectionString { get { return staticConnectionString; } } /// <summary> /// 获取服务器时间 /// </summary> /// <returns></returns> public static DateTime GetServerTime() { using (SqlConnection con = new SqlConnection(ConnectionString)) { SqlCommand cmd = new SqlCommand("SELECT GetDate()", con); con.Open(); DateTime dt = (DateTime)cmd.ExecuteScalar(); return dt; } } /// <summary> /// 执行非查询语句 /// </summary> /// <param name="cmdText">命令文本</param> /// <param name="commandParameters">参数列表</param> /// <returns>执行命令所影响的数据行数</returns> public static int ExecuteNonQuery(string cmdText, params SqlParameter[] commandParameters) { using (SqlConnection conn = new SqlConnection(ConnectionString)) { SqlCommand cmd = PrepareCommand(conn, null, CommandType.StoredProcedure, cmdText, commandParameters); int rv = cmd.ExecuteNonQuery(); cmd.Parameters.Clear(); return rv; } } /// <summary> /// 执行非查询语句 /// </summary> /// <param name="connectionString">连接字符串</param> /// <param name="cmdType">命令类型</param> /// <param name="cmdText">命令文本</param> /// <param name="commandParameters">参数列表</param> /// <returns>执行命令所影响的数据行数</returns> public static int ExecuteNonQuery(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters) { using (SqlConnection conn = new SqlConnection(connectionString)) { SqlCommand cmd = PrepareCommand(conn, null, cmdType, cmdText, commandParameters); int rv = cmd.ExecuteNonQuery(); cmd.Parameters.Clear(); return rv; } } /// <summary> /// 执行非查询语句 /// </summary> /// <remarks> /// 例如: int result = ExecuteNonQuery(connString, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24)); /// </remarks> /// <param name="conn">已存在的数据库连接</param> /// <param name="commandType">命令类型</param> /// <param name="commandText">命令文本</param> /// <param name="commandParameters">命令参数</param> /// <returns>执行命令所影响的数据行数</returns> public static int ExecuteNonQuery(SqlConnection connection, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters) { SqlCommand cmd = PrepareCommand(connection, null, cmdType, cmdText, commandParameters); int val = cmd.ExecuteNonQuery(); cmd.Parameters.Clear(); return val; } /// <summary> /// 在事务中执行非查询语句 /// </summary> /// <param name="trans">事务</param> /// <param name="commandType">命令类型</param> /// <param name="commandText">命令文本</param> /// <param name="commandParameters">命令参数</param> /// <returns>执行命令所影响的数据行数</returns> public static int ExecuteNonQuery(SqlTransaction trans, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters) { SqlCommand cmd = PrepareCommand(trans.Connection, trans, cmdType, cmdText, commandParameters); int val = cmd.ExecuteNonQuery(); cmd.Parameters.Clear(); return val; } /// <summary> /// 执行查询命令 /// </summary> /// <param name="connectionString">连接字符串</param> /// <param name="cmdType">命令类型</param> /// <param name="cmdText">命令文本</param> /// <param name="commandParameters">参数列表</param> /// <returns>数据读取器</returns> public static SqlDataReader ExecuteReader(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters) { SqlConnection conn = new SqlConnection(connectionString); try { SqlCommand cmd = PrepareCommand(conn, null, cmdType, cmdText, commandParameters); SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection); cmd.Parameters.Clear(); return dr; } catch { conn.Close(); throw; } } /// <summary> /// 执行查询命令 /// </summary> /// <param name="cmdText">命令文本</param> /// <param name="commandParameters">参数列表</param> /// <returns>数据读取器</returns> public static SqlDataReader ExecuteReader(string cmdText, params SqlParameter[] commandParameters) { SqlConnection conn = new SqlConnection(ConnectionString); try { SqlCommand cmd = PrepareCommand(conn, null, CommandType.StoredProcedure, cmdText, commandParameters); SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection); cmd.Parameters.Clear(); return dr; } catch { conn.Close(); throw; } } /// <summary> /// 执行单值查询语句 /// </summary> /// <param name="connectionString">连接字符串</param> /// <param name="cmdType">命令类型</param> /// <param name="cmdText">命令文本</param> /// <param name="commandParameters">参数列表</param> /// <returns>查询到的标量值</returns> public static object ExecuteScalar(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters) { using (SqlConnection connection = new SqlConnection(connectionString)) { |
请发表评论