Jquery分页功能

Jquery代码

/// <reference path="jquery-1.9.1-vsdoc.js" />
//锚点
var anchor="#apage";
$(function(){
    pagerFun();
    $("#btnSearch").click(function(){
        var name=$.trim($("#txtHospitalName").val());
        var provinceId=$("#selProvince").val();
        var rateLevel= $("#selRateLevel").val();
        var pageUrl=location.href.replace(location.search,"").replace(anchor,"");
        var newURL=pageUrl+"?name="+encodeURIComponent(name)+"&pid="+provinceId+"&level="+rateLevel+anchor;
        location.href=newURL;
        //location.replace(newURL)
    });
//    var Request = new Object();
//    Request = $.getRequest();
//    if(Request["name"]){
//        var name=Request["name"];
//        $("#txtHospitalName").val(decodeURIComponent(name));
//    }
});
//分页方法
function pagerFun(){
    var pageIndex=$("#hidPageIndex").val();
    var pageCount=$("#hidPageCount").val();
    var pageUrl=location.href.replace(location.search,"").replace(anchor,"");
    var urlSearch=location.search;
    if(urlSearch.indexOf("?") != -1) {
        urlSearch=urlSearch.substr(1);
        var paraArr=urlSearch.split("&");
        if(paraArr[0].indexOf("p=")!=-1){
            urlSearch=urlSearch.replace(paraArr[0],"");
        }
        if(urlSearch!=""&urlSearch.indexOf("&")!=0){
            urlSearch="&"+urlSearch;
        }
    }
    var strPager="";
    var showPager=5;
    var startIndex=1;
    var endIndex=pageCount;
    if(pageCount==2){
        if(pageIndex==1){
            strPager="<a class=\"curr\" href=\""+pageUrl+"?p=1"+urlSearch+anchor+"\">1</a>";
            strPager=strPager+"<a href=\""+pageUrl+"?p=2"+urlSearch+anchor+"\">2</a>";
        }
        else{
            strPager="<a href=\""+pageUrl+"?p=1"+urlSearch+anchor+"\">1</a>";
            strPager=strPager+"<a class=\"curr\" href=\""+pageUrl+"?p=2"+urlSearch+anchor+"\">2</a>";
        }
        
    }
    if(pageCount>2){
        var prevPage=pageIndex-1;
        if(prevPage<=0){
            strPager="<span>上一页</span>";
        }
        else{
            strPager="<a href=\""+pageUrl+"?p="+prevPage+urlSearch+anchor+"\">上一页</a>";
        }
        if(pageIndex>=5&&pageCount>5){
            startIndex=parseInt(pageIndex)-2;
            strPager=strPager+"<a href=\""+pageUrl+"?p=1"+urlSearch+anchor+"\">1</a>";
            strPager=strPager+"<span class=\"defspan\">...</span>";
            endIndex=parseInt(pageIndex)+2;
            if(endIndex>=pageCount){
                endIndex=pageCount;
                startIndex=parseInt(pageCount)-4;
            }
        }
        else{
            if(pageCount>showPager){
                if(pageIndex<showPager){
                    endIndex=showPager;
                }
                else{
                    endIndex=parseInt(pageIndex) +parseInt(showPager)-2;
                }
            }
        }
        for(var i=startIndex;i<=endIndex;i++)
        {
            if(i==pageIndex){
                strPager=strPager+"<a class=\"curr\" href=\""+pageUrl+"?p="+i+urlSearch+anchor+"\">"+i+"</a>";
                continue;
            }
            
            strPager=strPager+"<a href=\""+pageUrl+"?p="+i+urlSearch+anchor+"\">"+i+"</a>";
        }
        if(endIndex<pageCount){
            if(endIndex!=parseInt(pageCount)-1){
                strPager=strPager+"<span class=\"defspan\">...</span>";
            }
            strPager=strPager+"<a href=\""+pageUrl+"?p="+pageCount+urlSearch+anchor+"\">"+pageCount+"</a>";
        }
        var nextPage=parseInt(pageIndex)+1;
        if(nextPage>pageCount){
            strPager=strPager+"<span>下一页</span>";
        }
        else{
            strPager=strPager+"<a href=\""+pageUrl+"?p="+nextPage+urlSearch+anchor+"\">下一页</a>";
        }
    }
    $("#divPager").html(strPager);
}



前端代码

<input type="hidden" id="hidPageIndex" value="1" runat="server" />
            <input type="hidden" id="hidPageCount" value="1" runat="server" />
            <div class="pager" style="height: 30px;">
                <div id="divPager" style="float: right; margin-right: 40px;">
                </div>
            </div>



后台代码

/// <summary>
        /// 数据加载
        /// </summary>
        /// <param name="pageIndex">页码</param>
        /// <param name="provinceId">省份id</param>
        /// <param name="name">医院名字</param>
        /// <param name="level">星级</param>
        private void DataLoad(int pageIndex, int provinceId, string name, string level)
        {

phDataContext ph = new phDataContext();
            //IQueryable<PetOrg> petOrgList = ph.PetOrg.Where(p => p.State == 1 && (p.ProvinceId == provinceId || provinceId == 0));
            IQueryable<W_Petorg_PMP_PetOrgMoreInformation> petOrgList = ph.W_Petorg_PMP_PetOrgMoreInformation.Where(s => s.OrgState == 1);
            if (!name.IsNullOrEmptyOrWhiteSpace())
            {
                name = Uri.UnescapeDataString(name);
                txtHospitalName.Value = name;

petOrgList = petOrgList.Where(p => p.OrgName.Contains(name));
            }
           if (!provinceId.ToString().IsNullOrEmptyOrWhiteSpace()&&provinceId!=0)
           {
               petOrgList = petOrgList.Where(a => a.ProvinceId == provinceId);
           }
            int count = petOrgList.Count();
            int pageCount = OperatHelper.GetUpInt(count, pageSize);
            if (pageIndex > pageCount)
            {
                pageIndex = pageCount;
            }
            if (pageIndex <= 0)
            {
                pageIndex = 1;
            }
            if (count == 0)
            {
                //noHospital.InnerText = "无记录!";
            }
            else
            {
                rep_bind.DataSource = petOrgList.OrderByDescending(p => p.CreateDate).Skip((pageIndex - 1) * pageSize).Take(pageSize);
                rep_bind.DataBind();
            }
            hidPageCount.Value = pageCount.ToString();
            hidPageIndex.Value = pageIndex.ToString();  
        }



Jquery分页功能

时间: 2024-08-10 02:10:00

Jquery分页功能的相关文章

【jQuery 分页】jQuery分页功能的实现

自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其中引用bootstrap.css  和bootstrap .js是必须的 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ ta

jquery 分页功能

<div class="wrapper"> <div class="row"> <div class="col-sm-12"> <section class="panel"> <header class="panel-heading"> <form class="form-inline" role="form&q

jQuery插件 dataTable Ajax分页功能实现

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.需要可以到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库. 在网页开发过程中,我们可能会从后台读入数据建表.当数据过大时,可能导致建表时间过长,于是就需要实现Ajax分页功能,代码如下: HTML: <table id="example" class="display" wid

jQuery EasyUI插件使用之datagrid的分页功能使用备忘

官网:  http://www.jeasyui.com/index.php 对照这官网提供的demo以及api文档,慢慢摸索学习 首先是其中的datagrid插件,其中的分页功能 客户端相关属性配置: pagination     boolean 默认false  显示一个分页工具栏: true/false pagePosition  string  默认bottom 分页工具栏的位置:  'top','bottom','both' (下图就是在底部) pageNumber  number  默

jQuery静态分页功能

分页功能在做项目的过程中是常常用到的,下面是我常用的一款分页效果: 1.分页的CSS样式(page.css) 1 #setpage { 2 margin: 15px auto; 3 text-align: center; 4 } 5 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 6 border:1px solid #DDD; 7 background:#0d6cbf;

jquery分页插件

jquery.mypagination.js 文件: /* * * * jquery分页插件 * 1.0  zheng 2014-03-18 * 1.1  兼容url包含#号地址,GoToPage可以指定锚点(特殊需求)2014-04-10 09:00:34 * 1.2  可以配置分页条列出页面数 * 1.3  增加了页面码跳转功能 *  $('#mypage').scPagination(555, { *              pageSize: 10,//每页显示的记录条数 *    

jquery分页组件(每页显示多少条)

/** * 功能说明:jPager 分页插件 * 参数说明:pages:[] 分页的控件个数 @id:显示分页的div ID,@showSelectPage: 是否显示当前分页的条目过滤下拉框 * @currentpage 当前第几页 * @pagesize type:number 每页显示多少条目 * @total type:number 总条数 * @totalpage type:number 总页码数 * */ (function ($) { 'use strict'; $.jPager

简单实用的jQuery分页插件

在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能. 具体实现如下: 输入参数需要当前页码pageNo,总页码totalPage,回调函数callback. 主要的实现有两个函数,一个是根据当前页和总页数生成相应的html的代码,一个是事件绑定及回调函数的执行. creatHtml函数: creatHtml:function(){ var me=this; var content=""; //当前页码 var

[JQuery]分页插件PageList

虽然已经有了[JQuery]分页插件jQuery pager plugin功能扩展,可惜蛋疼的UI不一样,只能重做一个,唉 基本上与pager类似,只不过跳转方式有所变化,以下是具体的js,其中defaultSettings为相关参数设定,其中要注意的是renderPerCall,这个参数如果设为false,将不执行html重绘 $.fn.pageList = function (arg, methodName) { if (typeof methodName === "string"