jquery ajax 分页

<script src="../Js/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

        $(document).ready(function() {
            $("#pages").val(Math.ceil(50 / 10));
        });
        //翻页
        function changePage(ctype) {
            switch (ctype) {
                case ‘first‘:
                    $("#page").val(1);
                    break;
                case ‘prev‘:
                    if ($("#page").val() > 1) {
                        var num = parseInt($("#page").val()) - 1;
                        $("#page").val(num);
                    }
                    break;
                case ‘next‘:
                    if ($("#page").val() < $("#pages").val()) {
                        var num = parseInt($("#page").val()) + 1;
                        $("#page").val(num);
                    }
                    break;
                case ‘last‘:
                    $("#page").val($("#pages").val());
                    break;
            }
//            if ($("#newp").val() == $("#page").val())
//                return false;
            populate();
        }

          //获取数据
        function populate() {

            if ($("#page").val() > $("#pages").val())
                $("#page").val($("#pages").val());

            var param = [
                      { name: ‘page‘, value: $("#page").val() }
                    , { name: ‘rp‘, value: 10 }
                    , { name: ‘sortname‘, value: "" }
                    , { name: ‘sortorder‘, value: "" }
                    , { name: ‘query‘, value: "" }
                    , { name: ‘qtype‘, value: "" }
                    , { name: ‘primaryKey‘, value: "" }
                ];
            $.ajax({
                type: "POST",
                url: "HandlerPager.ashx?Action=Pagers",
                async: true,
                data: param,
                dataType: "json",
                success: function(data) {
                    $("#spanPageIndex").html(data);
                },
                error: function(data) {
                    try {
                    } catch (e) { }
                }
            });
        }
    </script>
<div>
            <input type="hidden" value="1" id="page" /><!--当前页-->
            <input type="hidden" value="1"id="pages" /><!--总页数-->

            <span id="first" onclick="changePage(this.id)">首页</span>
            <span id="prev" onclick="changePage(this.id)">上一页</span>
            <span id="spanPageIndex" >1</span>
            <span id="next" onclick="changePage(this.id)">下一页</span>
            <span id="last" onclick="changePage(this.id)">尾页</span>
        </div>
 public class HandlerPager : IHttpHandler
    {

        private string requestParam = string.Empty;//HttpHandler用于异步调用提交的服务器类
        public void ProcessRequest(HttpContext context)
        {
              requestParam = context.Request.QueryString["Action"];

              switch (requestParam)
              {
                  case "Pagers":        //?
                      Pagers(context);
                      break;
              } 

        }

        void Pagers(HttpContext context)
        {
            string result = string.Empty;
            Model_Wzsjfycs parm = FlexiGridParm.GetFlexiGridParam(context);
            result = parm.PageIndex.ToString();
            context.Response.ContentType = "text/plain";
            context.Response.Write(result);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    /// <summary>
    /// 分页请求参数类  可有可无,为了方便获取数据
    /// </summary>
    public class Model_Wzsjfycs
    {
        /// <summary>
        /// 当前页码
        /// </summary>
        public int PageIndex;
        /// <summary>
        ///
        /// </summary>
        public int PageSize;
        /// <summary>
        /// 主键
        /// </summary>
        public string PrimaryKey;
        /// <summary>
        /// 排序字段(多个字段用‘,‘号分开)
        /// </summary>
        public string OrderFields;
        /// <summary>
        /// 排序方式(asc 、desc)
        /// </summary>
        public string Order;
        /// <summary>
        /// 查询字段
        /// </summary>
        public string FilterFields;
        /// <summary>
        /// 查询内容
        /// </summary>
        public string FilterContents;
    }
 public class FlexiGridParm
    {

        /// <summary>
        /// 从HTTP中提取请求并封装FlexiGridParm类 用于解析 HttpContent请求上下文对象(页面发送请求的数据 以及 请求后返回的数据 );
        /// </summary>
        /// <param name="context">HttpContext</param>
        /// <returns>Model_PagingParm</returns>
        public static Model_Wzsjfycs GetFlexiGridParam(HttpContext context)
        {
            string pageIndex = context.Request["page"],
                   pageSize = context.Request["rp"],
                   primaryKey = context.Request["primaryKey"],
                   orderFields = context.Request["sortname"],
                   order = context.Request["sortorder"],
                   filterFields = context.Request["qtype"],
                   filterContents = context.Request["query"];

            Model_Wzsjfycs parm = new Model_Wzsjfycs();
            //当前页码
            if (!string.IsNullOrEmpty(pageIndex))
                parm.PageIndex = int.Parse(pageIndex);
            else
                parm.PageIndex = 0;
            //一页显示条数
            if (!string.IsNullOrEmpty(pageSize))
                parm.PageSize = int.Parse(pageSize);
            else
                parm.PageSize = 0;
            //主键
            if (!string.IsNullOrEmpty(primaryKey))
                parm.PrimaryKey = primaryKey;
            else
                parm.PrimaryKey = string.Empty;
            //排序
            if (!string.IsNullOrEmpty(orderFields))
                parm.OrderFields = orderFields.Trim();
            else
                parm.OrderFields = string.Empty;
            //排序字段
            if (!string.IsNullOrEmpty(order) && order.ToLower() == "desc")
                parm.Order = "desc";
            else
                parm.Order = "asc";
            //查询字段
            if (!string.IsNullOrEmpty(filterFields) && filterContents != null)
            {
                parm.FilterFields = filterFields;
                parm.FilterContents = context.Server.UrlDecode(filterContents);
            }
            else
                parm.FilterFields = parm.FilterContents = string.Empty;

            return parm;
        }

        /// <summary>
        /// 获取FlexiGridParm 对象
        /// </summary>
        /// <param name="pageIndex">当前页码</param>
        /// <param name="pageSize">一页显示条数</param>
        /// <param name="primaryKey">主键</param>
        /// <param name="orderFields">排序字段(多个用‘,‘号隔开)</param>
        /// <param name="order">排序方式(asc、desc)</param>
        /// <param name="filterFields">查询字段</param>
        /// <param name="filterContents">查询内容</param>
        /// <returns>Model_PagingParm</returns>
        public static Model_Wzsjfycs GetFlexiGridParam(int pageIndex, int pageSize, string primaryKey, string orderFields, string order, string filterFields, string filterContents)
        {
            Model_Wzsjfycs parm = new Model_Wzsjfycs();
            parm.PageIndex = pageIndex;
            parm.PageSize = pageSize;
            parm.PrimaryKey = primaryKey;
            parm.OrderFields = orderFields;
            parm.Order = order;
            parm.FilterFields = filterFields;
            parm.FilterContents = filterContents;
            return parm;
        }

    }        
时间: 2024-10-28 02:58:15

jquery ajax 分页的相关文章

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.

Pagination jquery ajax 分页参考资料

http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/ 个人博客参考 中文项目地址:http://www.zhangxinxu.com/jq/pagination_zh/ 原项目地址:http://plugins.jquery.com/project/pagination 版

jquery+ajax分页

先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: <head runat="server"> <title>JQuery无刷新分页</title> <link href="Styles/co

jquery ajax 分页2

/* * 分页 $("#divPager").flexipager * 2015.03.17 */ //初始化列表默认属性 (function($) { $.addFlex = function(t, p) { if (t.pager) return false; // 若已经存在Pager - DIV 对象则return p = $.extend({ url: false, // 获取数据源对应的url地址 async: true, // 默认异步加载(false=同步) metho

laravel5.6中jquery+ajax分页

public function shows(Request $request){ $p=$request->get("page"); $page=empty($p)?1:$p; $count=DB::table("shop")->count(); $length = 4; $num_page = ceil($count/$length); $limit = ($page-1)*$length; $data=DB::select("select

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="renmai_PageTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

jQuery、Ajax分页

1.效果图预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable"> <

[原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpag