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 258D DP
D. Little Elephant and Broken Sorting time limit per test 2 seconds memory limit per test 256 megaby ...
【PyTorch深度学习】学习笔记之PyTorch与深度学习
第1章 PyTorch与深度学习深度学习的应用接近人类水平的图像分类接近人类水平的语音识别机器翻译自动驾驶汽车 Siri.Google语音和Alexa在最近几年更加准确日本农民的黄瓜智能分 ...
线段树[To be continued]
目录数据结构--线段树一.定义二.性质三.基本操作 0.结构体 1.建树 2.单点查询 3.单点修改 4.区间修改 5.区间查询四.题目单点修改.区域查询模板五.鸣谢学姐的Blog 百 ...
在 Amazon AWS 搭建及部署网站：（二）安装、配置软件，启动网站
现在,我们已经有了一台EC2主机,具备了基本的硬件环境.下面,开始软件环境的配置. 第一步:连接服务器后面所有的一切,都需要在SSH终端窗口操作.首先,我们需要一个SSH客户端.PuTTY是很常用的 ...
【Generate Parentheses】cpp
题目: Given n pairs of parentheses, write a function to generate all combinations of well-formed paren ...
centOS6.6虚拟机启动后登陆界面无法显示
1.图一和图二对比就很明显发现,我的登陆界面不见了(突然断电导致不正常关机,造成图形界面桌面崩溃) 2.解决方法:启动按Ctrl+Alt+f2切换进命令行界面,root账号进入,重新下载图形界面
习题：最短路计数（SPFA最短路计数）
最短路计数(洛谷1144)题目描述给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条.输入输出格式输入格式:输入第一行包含2个正整数N,M,为图的顶点数 ...
【bzoj4127】Abs 树链剖分+线段树
题目描述给定一棵树,设计数据结构支持以下操作 1 u v d 表示将路径 (u,v) 加d 2 u v 表示询问路径 (u,v) 上点权绝对值的和输入第一行两个整数n和m,表示结点个数和操作数 ...
How to modify a compiled Android application (.apk file)
Today I’d like to share with you my findings about how an existing .apk file can be modified. An .ap ...
AGC 26 F Manju Game
$\DeclareMathOperator{\sw}{sw}$ $\DeclareMathOperator{\sb}{sb}$ $\DeclareMathOperator{\dp}{dp}$ 用 $\ ...

jquery -----简单分页

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

随机推荐

热门专题