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

随机推荐

kubernetes中使用ServiceAccount创建kubectl config 文件
在kubernetes 为不同的项目创建了不同的SerivceAccount,那么如何通过ServiceAccount创建 kubectl config文件呢?使用下面脚本即可 # your serv ...
EasyUI与Bootstrap完美结合
注意点:版本问题.两者都是基于jQuery来构建,所以对于版本的选择要注意下
mysql-不恰当的update语句使用主键和索引导致mysql死锁
背景知识:MySQL有三种锁的级别:页级.表级.行级. MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking):BDB存储引擎采用的是页面锁(page-level ...
NopCommerce 导航菜单HTML静态处理以提高性能
因网站要快速上线,有时候NopCommerce性能问题一直是困扰我们的最大因素,查找出来需要优化的部分代码进行修改重构是方法之一,我等非主流优化方式只为快速提高程序整体性能. 我以导航菜单为例,列出我 ...
Django权限管理系统设计分析
权限管理顾名思义,其实就是角色控制权限的系统,每个用户对应一个角色,每个角色有对应的权限,比如公司会有CEO,总监,销售经理,销售员,每个人的权限都不一样,那我们给他展示的url也都不同一.首先创建 ...
5、CSS基础part-3
1.CSS列表 ①类型 ul.disc {list-style-type: disc} ②位置 ul.inside {list-style-position: inside} ③列表图像 2.表格
TortoiseSVN 同时检索多人的提交日志记录（如图操作）
【Luogu P2781】传教
这题是可以用线段树做的. 虽然$n\leq 10^9$ 可以发现,真正需要用到的节点很少,故动态开点,只有需要用到的时候才新建节点. 这里我在下放标记的时候新建节点,因为每操作/查询一个节点都需要先下 ...
Sentinel系统监控Redis主从节点
author:JevonWei 版权声明:原创作品 blog:http://119.23.52.191/ --- 构建Sentinel监控Redis的主节点架构拓扑结构结构拓扑环境 master ...

jquery -----简单分页

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

随机推荐

热门专题