jquery -----简单分页

<!DOCTYPE html>

<head>

    <title>无标题页</title>

    <script src="javsscript/jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        var page = 1;

        var pagesize = 5;

        var s_name;

        $(function() {

            //------查询

        $("#search").click(function() {

                page = 1;

                s_name = $("#txtSearch").val();

                getAjaxData(s_name, page, pagesize);

            });

        });

        //------封装分页方法开始

        function getAjaxData(strwhere, page, pagesize) {

            $.ajax({

                type: "get",

                url: "demo7.ashx",

                datatype: "json",

                contentType: "application/json;charset=utf-8",

                //data:{ page: page, pagesize: pagesize,name: strwhere }, 或：

                data: "name=" + strwhere + "&page=" + page + "&pagesize=" + pagesize,

                success: function(data) {

                    var htmlStr = "";

                    htmlStr += "<table>"

                    htmlStr += "<thead>"

                    htmlStr += "<tr><td>编号</td><td>姓名</td><td>年龄</td><td>备注</td></tr>"

                    htmlStr += "</thead>";

                    htmlStr += "<tbody>"

                    for (var i = 0; i < data.userlist.length; i++) {

                        htmlStr += "<tr>";

                        htmlStr += "<td>" + data.userlist[i].userid + "</td>"

                                          + "<td>" + data.userlist[i].username + "</td>"

                                          + "<td>" + data.userlist[i].userage + "</td>"

                                          + "<td>" + data.userlist[i].userdesc + "</td>"

                        htmlStr += "</tr>";

                    }

                    //如果查询出得结果总数小于pagesize则用空行填充

                    if (data.userlist.length < pagesize) {

                        for (var i = 0; i < pagesize - data.userlist.length; i++)

                         {

                            htmlStr += "<tr><td style='height:28px;'></td></tr>";

                         }

                    }

                    htmlStr += "</tbody>";

                    htmlStr += "<tfoot>";

                    htmlStr += "<tr>";

                    htmlStr += "<td colspan='4'>";

                    htmlStr += "<span>总:" + data.totalcount + "条 当前:" + page + "/<span id='count'>" + (data.totalcount % pagesize == 0 ? parseInt(data.totalcount / pagesize) : parseInt(data.totalcount / pagesize + 1)) + "</span>页" + "</span>";

                    htmlStr += "<a href='javascript:GoToFirstPage()'id='aFirstPage' >首    页</a>";

                    htmlStr += "<a href='javascript:GoToPrePage()'  id='aPrePage' >上一页</a>";

                    htmlStr += "<a href='javascript:GoToNextPage()' id='aNextPage'>下一页</a>";

                    htmlStr += "<a href='javascript:GoToEndPage()'  id='aEndPage' >尾    页</a>";

                    htmlStr += "<input type='text' /><input type='button'  value='跳转' onclick='GoToAppointPage(this)' /> ";

                    htmlStr += "</td>";

                    htmlStr += "</tr>";

                    htmlStr += "</tfoot>";

                    htmlStr += "</table>";

                    $("#userlist").html(htmlStr);

                },

                error: function(error) {

                    alert(error);

                }

            });

        }

        //--------封装分页方法结束

        //首页

        function GoToFirstPage() {

            page = 1;

            getAjaxData(s_name, page, pagesize);

        }

        //前一页

        function GoToPrePage() {

            page = page-1<= 0 ? 1 : page-1;

            getAjaxData(s_name, page, pagesize);

        }

        //后一页

        function GoToNextPage() {

            if (page + 1 <= parseInt($("#count").text())) {

                page=page+1;

            }

            getAjaxData(s_name, page, pagesize);

        }

        //尾页

        function GoToEndPage() {

            page = parseInt($("#count").text());

            getAjaxData(s_name, page, pagesize);

        }

        //跳转

        function GoToAppointPage(e) {

            var page_goto = $(e).prev().val();

            if (isNaN(page_goto)) {

                alert("请输入数字!");

            }

            else {

                var tempPageIndex = page;

                page = parseInt($(e).prev().val());

                if (page < 0 || page >parseInt($("#count").text())) {

                    page = tempPageIndex;

                    alert("请输入有效的页面范围!");

                }

                else {

                    getAjaxData(s_name, page_goto, pagesize);

                }

            }

        }

    </script>

    <!--简单样式 -->

 <style type="text/css">

   #userlist{border:1px solid gray; width:500px; height:215px;}

   #userlist table{border-collapse: collapse; width:100%; height:auto;background:CFCFCF;}

   #userlist table thead{ margin:0; padding:0; background-color:#CCCCCC;text-align:center; height:30px; line-height:30px;}

   #userlist tbody tr{ height:28px; line-height:28px; text-align:center; }

   #userlist tfoot tr{ height:30px; background:#CCCCCC;line-height:30px; text-align:center;}

   #userlist tfoot tr td a{ text-decoration:none; margin:4px;}

   #userlist tfoot tr td a:hover{ text-decoration:underline; color:Red;}

   #userlist tfoot tr td input{ height:20px; width:40px; margin:4px;}

   #userlist tfoot tr td input[type=text]{ background:white; border:0;}

   #userlist tfoot tr td input[type=button]{ border:1px dashed; position:relative;top:0px;top:2px\0; cursor:pointer;}

 </style>

</head>

<body>

    用户姓名：<input type="text" name="name" id="txtSearch" /><input type="button" id="search"

        value="查询" /><br />

    <div id="userlist">

    </div>

</body>

</html>

---------------后台代码：

<%@ WebHandler Language="C#" Class="demo7" %>

using System;

using System.Web;

using System.Configuration;

using System.Data.SqlClient;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;

public class demo7 : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        //context.Response.ContentType = "text/plain";

        context.Response.ContentType = "application/json";

        string username = context.Request.Params["name"].ToString();

        //string username = context.Request.QueryString["name"].ToString();

        int page = Convert.ToInt32(context.Request.Params["page"].ToString());

        int pagesize = Convert.ToInt32(context.Request.Params["pagesize"].ToString());

        //链接数据库

        //string strcon ="server=WIN-B36NXMUXT0K\MSSQL;user ID=user;password=user;database=test";

        //或读取webconfing

        string strcon = ConfigurationManager.AppSettings["pubsConnectionString"].ToString();

        SqlConnection con = new SqlConnection(strcon);

        con.Open();

        SqlCommand com = new SqlCommand();

        com.Connection = con;

        com.CommandType = CommandType.StoredProcedure;

        com.CommandText = "proc_searchuser";

        SqlParameter[] par = new SqlParameter[] { 

               new SqlParameter("@username",SqlDbType.VarChar,12),

               new SqlParameter("@page",SqlDbType.Int),

               new SqlParameter("@pagesize",SqlDbType.Int),

               new SqlParameter("@totalcount",SqlDbType.Int)

            };

        par[0].Value = username;

        par[1].Value = page;

        par[2].Value = pagesize;

        par[3].Direction = ParameterDirection.Output;

        com.Parameters.AddRange(par);

        //int res = com.ExecuteNonQuery();

        SqlDataAdapter da = new SqlDataAdapter(com);

        DataSet ds = new DataSet();

        da.Fill(ds);

        int totalcount = Convert.ToInt32(par[3].Value.ToString());

        com.Dispose();

        con.Close();

        string json = ObjectToJSON(DataTableToList(ds.Tables[0]));

        string resultjson = "{\"totalcount\":"+totalcount+",\"userlist\":"+json+"}";

        context.Response.Write(resultjson);

    }

    //datatable转换为list

    public static List<Dictionary<string, object>> DataTableToList(DataTable dt)

    {

        List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();

        foreach (DataRow dr in dt.Rows)

        {

            Dictionary<string, object> dic = new Dictionary<string, object>();

            foreach (DataColumn dc in dt.Columns)

            {

                dic.Add(dc.ColumnName, dr[dc.ColumnName]);

            }

            list.Add(dic);

        }

        return list;

    }

    //系列化json

      public static string ObjectToJSON(object obj){

          JavaScriptSerializer jss =new JavaScriptSerializer();

          try

          {

              return jss.Serialize(obj);

          }

          catch(Exception ex)

          {

              throw new Exception("JSONHelper.ObjectToJSON(): "+ ex.Message);

          }

      }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

//----------分页存储过程----------------------
create proc [dbo].[proc_searchuser]

(

  @username varchar(12),

  @page int=1,

  @pagesize int=10,

  @totalcount int output

)

as

declare @totalsql nvarchar(200)

declare @sql varchar(4000)

if(ISNULL(@username,'')<>'')

begin

    set @totalsql='select @totalcount=COUNT(*) from userinfo where username like ''%'+@username+'%'''

end

else

begin

     set @totalsql='select @totalcount=COUNT(*) from userinfo'

end

exec sp_executesql @totalsql,N'@totalcount int output',@totalcount output

-------------分页--------------

if @page<=0 set @page=1

set @sql='select * from (select ROW_NUMBER() over(order by userid)rowNO,* from userinfo where username like ''%'+@username+'%'')U

where U.rowNo BETWEEN '+str((@page-1)*@pagesize+1)+' AND ' +str(@page*@pagesize)

exec (@sql)

jquery -----简单分页的更多相关文章

jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...
JavaScript简单分页，兼容IE6，~3KB
简介兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...
jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
jquery 简单弹出层(转)
预定义html代码:没有所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...

随机推荐

Codeforces Round #461 (Div. 2) D. Robot Vacuum Cleaner
D. Robot Vacuum Cleaner time limit per test 1 second memory limit per test 256 megabytes Problem Des ...
char* 与char[]区别
[转] 最近的项目中有不少c的程序,在与项目新成员的交流中发现,普遍对于char *s1 和 char s2[] 认识有误区(认为无区别),导致有时出现“难以理解”的错误.一时也不能说得很明白,网上也 ...
CMD命令简介
cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一般Wind ...
平衡树 - Luogu 1486 郁闷的出纳员
这么久没写平衡树了,再来一发... P1486 郁闷的出纳员题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的 ...
RSA进阶之共模攻击
适用场景: 同一个n,对相同的m进行了加密,e取值不一样. e1和e2互质,gcd(e1,e2)=1 如果满足上述条件,那么就可以在不分解n的情况下求解m 原理复杂的东西简单说: 如果gcd(e1, ...
schema.xml属性概念
# schema 定义逻辑库 checkSQLschema 当该值设置为 true 时,如果我们执行语句**select * from TESTDB.travelrecord;**则 MyCat 会 ...
import from 相对路径
项目目录 - server - static - src - - stroe - - router - - main.js - app.js src为前端文件,src目录下有main.js代码如下 i ...
【bzoj2280】[Poi2011]Plot 二分+倍增+二分+最小圆覆盖
题目描述给出一系列点p_1, p_2, ... , p_n,将其分成不多余m个连续的段,第i段内求一个点q_i,使得q_i到这段内点的距离的最大值的最大值最小输入第一行,n m下面n行,每行两个 ...
【bzoj3083】遥远的国度树链剖分+线段树
题目描述描述zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国度.当zcwwzdjn准备进入遥远的国度继续追杀时,守护神RapiD阻拦了zcwwzdjn的去路,他需要zcwwzdjn ...
C#如何定义一个变长的一维和二维数组
1.假设将要定义数组的长度为程序执行过程中计算出来的MAX List<int> Arc = new List<int>(); ; i < MAX; i++) { Arc. ...

jquery -----简单分页

jquery -----简单分页的更多相关文章

随机推荐

热门专题