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 项目的用户体验有了极大的提高,如今借助优秀的 ...

随机推荐

力扣题目汇总（丑数，重复N的元素，求众数）
丑数 1.题目描述编写一个程序判断给定的数是否为丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例 1: 输入: 6 输出: true 解释: 6 = 2 × 3 示例 2: 输入: 8 ...
python常见概念
1. 什么是鸭子类型? 不要检查它是不是鸭子:检查它的叫声像不像鸭子,走起路来像不像鸭子.如果走起路来像鸭子,叫起来也像鸭子,那么它就是鸭子.鸭子类型是编程语言中动态类型语言中的一种设计风格,一个对象 ...
IIC简介（转载）
来自:https://www.cnblogs.com/zalebool/p/4214599.html IIC简介: IIC 即Inter-Integrated Circuit(集成电路总线),这种总线 ...
POJ3436------ACM Computer Factory
题目链接 ACM Computer Factory Description As you know, all the computers used for ACM contests must be i ...
sql优化系列2
sql中索引是否会用到,进而影响查询效率. 带通配符(%)的like语句 1.不能用null作索引,任何包含null值的列都将不会被包含在索引中.即使索引有多列这样的情况下,只要这些列中有一列含有nu ...
线性回归 python小样例
线性回归优点:结果易于理解,计算上不复杂缺点:对非线性的数据拟合不好适用数据类型:数值型和标称型数据horse=0.0015*annualSalary-0.99*hoursListeningToPul ...
redis 之相关命令
为什么缓存数据库更要首选redis?如何使用redis? 一.使用缓存数据库为什么首选用redis? 我们都知道,把一些热数据存到缓存中可以极大的提高速度,那么问题来了,是用Redis好还是Memca ...
Pre 自动换行和手动换行
pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre ...
Struts之准备工作
*Struts之需要准备的jar包: *Struts之xml配置文件: <?xml version="1.0" encoding="UTF-8"?> ...
BugKu 2B+基于python的opencv的安装-------CTF 盲水印的套路
BugKu杂项-2B 下载图片后,binwalk下跑一跑,发现有个zip,分离. 值得一提的是,这个zip是伪加密的. 但是你在分离的时候,伪加密的图片也给你分离出来了.这两个图片2B和B2肉眼看起来 ...

jquery -----简单分页

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

随机推荐

热门专题