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

随机推荐

[Poj2761]Feed the dogs（主席树）
Desciption 题意:求区间第K小(N<=100000) Solution 主席树模板题 Code #include <cstdio> #include <algorit ...
实验6 流类库与I/O
Part2 基础练习使用文件I/O流,以文本方式打开Part1中合并后的文件,在文件最后一行添加字符"merge successfully. " // 合并两个文件内容到一个新文 ...
等比例适配所有屏幕---css3 rem用法
1,rem的定义 rem(font size of the root element)是指相对于根元素的字体大小的单位.rem是一个相对单位.和em非常相似.em(font size of the e ...
JQuery easyUi datagrid 中自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中使用datagrid生 ...
史上最权威的 Activiti 框架学习
Activiti5 是由 Alfresco 软件在 2010 年 5 月 17 日发布的业务流程管理( BPM) 框架,它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的. ...
【Median of Two Sorted Arrays】cpp
题目: There are two sorted arrays A and B of size m and n respectively. Find the median of the two sor ...
使用bat命令实现拖动快速安装APK包
平时安装APK包,每次都要打命令adb install *********** 很繁琐,网上找到一个用BAT命令快速安装的方法在桌面创建一个bat文件,输入: @echo off title i ...
Django中前端界面实现级联查询
Django前端界面实现级联查询一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...
系统中同时安装sql2005 和 sql2008 R2 提示要删除SQL Server 2005 Express
修改注册表:HKLM\Software\Microsoft\Microsoft SQL Server\90\Tools\ShellSEM,把 ShellSEM重命名即可如果是64位机器在 HKL ...
jdk -version could not open jvm.cfg 的解决办法
java 时出现 could not open jvm.cfg 的解决办法问题描述: 重装JDK并更变目录后,出现JAVA -VERSION 出现could not open jvm.cf ...

jquery -----简单分页

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

随机推荐

热门专题