zoukankan      html  css  js  c++  java
  • 无刷新分页 jquery.pagination.js

    无刷新分页 jquery.pagination.js

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个。

    首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css)。

     点击获取查看这两个文件

    2.页面js代码为 

    复制代码
    <script type="text/javascript"> 
    
             var pageIndex = 0;     //页面索引初始值   
             var pageSize = 15;     //每页显示条数初始化,修改显示条数,修改这里即可   
             $(function () {
                  InitTable(0);    //Load事件,初始化表格数据,页面索引为0(第一页)
                    //分页,PageCount是总条目数,这是必选参数,其它参数都是可选
                    $("#Pagination").pagination(<%=pcount%>, {
                        callback: PageCallback,  //PageCallback() 为翻页调用次函数。
                           prev_text: "« 上一页",
                        next_text: "下一页 »",
                        items_per_page:pageSize,
                        num_edge_entries: 2,       //两侧首尾分页条目数
                           num_display_entries: 6,    //连续分页主体部分分页条目数
                           current_page: pageIndex,   //当前页索引
                    });
                    //翻页调用   
                    function PageCallback(index, jq) {             
                        InitTable(index);  
                    }  
                    //请求数据   
                    function InitTable(pageIndex) {                                  
                        $.ajax({   
                            type: "POST",  
                            dataType: "text",  
                            url: 'http://www.cnblogs.com/tool/Reserver/ManageBuyBatchManage.ashx',      //提交到一般处理程序请求数据   
                            data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,          //提交两个参数:pageIndex(页面索引),pageSize(显示条数)                   
                            success: function(data) {
                                $("#Result tr:gt(0)").remove();        //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变)   
                                $("#Result").append(data);             //将返回的数据追加到表格   
                            }  
                        }); 
                    }
                }); 
    </script>
    复制代码

    3.页面<body>里面的代码为

    复制代码
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td  width="60"  align="right">商品名:</td>
                    <td  width="200" align="left"><input  type="text" id="txtKeywords" class="keyword" /></td>
                    <td  width="200" align="left"><input id="search" type="button" value=" 查 找 " class="submit" /></td>
                    <td >&nbsp;</td>
                </tr>
            </table>
            <table id="Result" cellspacing="0" cellpadding="0">            
                    <tr>  
                        <th>商品编号</th>
                        <th>商品名称</th>
                    </tr>                                                                                               
            </table>  
            <div id="Pagination" class="right flickr"></div> 
    复制代码

    4.页面后台代码为

    复制代码
            protected int pcount = 0;           //总条数
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BLL.TbGoods bll = new BLL.TbGoods();
                    pcount = bll.GetRecordCount("Status='" + (int)Enum.RecordStatus.Normal + "'"); //获取页面总条数,即要现实的数据总条数,还不明白的话,就是select count(*)from Table ,就是这里的个数。
                }
            }
    复制代码

    5.一般处理程序fffff.ashx代码为

    复制代码
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Text;
    using System.Data;
    
    namespace EShop.Web.Admin.tool.Reserver
    {
        /// <summary>
        /// ListBuyBatchManage 的摘要说明
        /// </summary>
        public class ListBuyBatchManage : IHttpHandler
        {
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                String str = string.Empty;
               
                if (context.Request["pageIndex"] != null && context.Request["pageIndex"].ToString().Length > 0)
                {
                    int pageIndex;   //具体的页面数
                    int.TryParse(context.Request["pageIndex"], out pageIndex);
                    if(context.Request["pageSize"]!=null&&context.Request["pageSize"].ToString().Length > 0)
                    {
                    //页面显示条数   
                    int size = Convert.ToInt32(context.Request["pageSize"]);
                    string data= BindSource(size,pageIndex);                
                    context.Response.Write(data);
                    context.Response.End();
                    }
                }
    
               
            }       
            #region 无刷新分页
            public string BindSource(int pagesize,int page)
            { 
               BLL.TbGoods bll=new BLL.TbGoods();
               DataSet ds = bll.GetListByPage("Status='" + (int)Enum.RecordStatus.Normal + "'", "", pagesize * page + 1, pagesize * (page + 1));  //获取数据源的ds会吧。
               StringBuilder sb = new StringBuilder();
               if (ds!=null)
               {
                   foreach (DataRow row in ds.Tables[0].Rows)
                   {
                       sb.Append("<tr><td>");
                       sb.Append(row["GoodsUid"]);
                       sb.Append("</td><td>");
                       sb.Append(row["GoodsName"]);
                       sb.Append("</td></tr>");
                   }
                }
               return sb.ToString();
            }
            #endregion
    
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }
    复制代码

    6.效果图

     转载原文:http://www.cnblogs.com/knowledgesea/archive/2012/05/19/2508924.html

  • 相关阅读:
    PAT (Advanced Level) Practice 1055 The World's Richest (25 分) (结构体排序)
    PAT (Advanced Level) Practice 1036 Boys vs Girls (25 分)
    PAT (Advanced Level) Practice 1028 List Sorting (25 分) (自定义排序)
    PAT (Advanced Level) Practice 1035 Password (20 分)
    PAT (Advanced Level) Practice 1019 General Palindromic Number (20 分) (进制转换,回文数)
    PAT (Advanced Level) Practice 1120 Friend Numbers (20 分) (set)
    从零开始吧
    Python GUI编程(TKinter)(简易计算器)
    PAT 基础编程题目集 6-7 统计某类完全平方数 (20 分)
    PAT (Advanced Level) Practice 1152 Google Recruitment (20 分)
  • 原文地址:https://www.cnblogs.com/lizihong/p/4316466.html
Copyright © 2011-2022 走看看