zoukankan      html  css  js  c++  java
  • 异步无刷新分页[一般处理程序处理]的简单思路

    -1.load 事件之后执行loadAjax()方法:

    $(function () {
    loadAjax(1);
    });

    0.在loadAjax()方法中:

    function loadAjax(pageIndex) {
    $("#p").text("正在加载sssssssssssss");
    //发送异步请求
    // $.getJSON("PhotosList.ashx?_=" + Math.random(), function (msg) {//请求全部页面信息
    $.getJSON("PagingPics.ashx?_=" + Math.random(), "pageIndex=" + pageIndex + "&pageSize=" + 3, function (msg) {
    var pageCount = msg.pageCount; //获取所有的页数
    var jsonArr = msg.json; //获取json对象的第二个元素
    $("#p").empty(); //清空id 为p的div里面的元素;
    var $table = $("<table id='photos' cellspacing='0px'></table>");//创建table包装集;
    $("#p").append($table);//把刚创建的table包装集附加到id为p的div中;

    //表头
    var $tr = $("<tr><th>序号</th><th>标题</th><th>图片</th><th>点击次数</th><th>支持</th><th>反对</th><th>时间</th><th>操作</th></tr>");//创建投行;
    $table.append($tr);//把第一行添加到刚创建的table包装集中;
    ////////////////pageBar
    var $bar = $("<a href='javascript:void(0)'>第一页</a>&nbsp;&nbsp;<a href='javascript:void(0)'>上一页</a>&nbsp;&nbsp;<a href='javascript:void(0)'>下一页</a>&nbsp;&nbsp;<a href='javascript:void(0)'>最后一页</a>");
    $("#p").append($bar);
    //显示当前页面位置
    $("#p").append(pageIndex + "/" + pageCount);
    /////////////////////////////////////////////对页数操作
    //第一页
    $("a:eq(0)", $("#p")).click(function () {
    //alert("第一页");
    if (pageIndex != 1)
    loadAjax(1); //加载到第一页
    });
    //上一页
    $("a:eq(1)", $("#p")).click(function () {
    //alert(2);
    if (pageIndex != 1) {
    var n = pageIndex;
    n = n - 1;
    loadAjax(n); //加载到下一页
    }

    });
    //下一页
    $("a:eq(2)", $("#p")).click(function () {
    // alert(3);
    if (pageIndex != pageCount) {
    var m = pageIndex;
    m = m + 1;
    loadAjax(m); //加载到上一页
    }
    });
    //最后一页
    $("a:eq(3)", $("#p")).click(function () {
    // alert(4);
    if (pageIndex != pageCount)
    loadAjax(pageCount); //加载到最后一页
    });
    /////////////////////////////////////////////对页数操作
    ////////////////pageBar
    //下面是处理响应数据信息;
    for (var i = 0; i < jsonArr.length; i++) {
    var json = jsonArr[i];
    var $tr = $("<tr></tr>");
    $table.append($tr);

    //序号
    var $td = $("<td>" + (i + 1) + "</td>");
    $tr.append($td);

    //标题
    $td = $("<td><a href='PicDetails.aspx?pid=" + json.PId + "'>" + json.PTitle + "</a></td>");
    $tr.append($td);

    //图片
    $td = $("<td>" + json.PUrl + "</td>");
    $tr.append($td);

    //点击次数
    $td = $("<td>" + json.PClicks + "</td>");
    $tr.append($td);

    //支持
    $td = $("<td><a pid='" + json.PId + "' href='javascript:void(0)'><img src='85.gif' border=0/><span>" + json.PUp + "</span></a></td>");
    $tr.append($td);
    //////////////////////////支持增加
    $("a", $td).click(function () {//如何获得a标签 //new:获取$td下面的a标签;
    var pid = $(this).attr("pid"); //如何获得该行的pid
    var $link = $(this);
    //如何防止读取浏览器缓存数据
    $.get("UpDownClick.ashx?_=" + Math.random(), "pid=" + pid + "&type=1", function (msg) {
    var cou = $("span", $link).text();
    cou++;
    $("span", $link).text(cou); //如何获得a标签里的数据并改之
    });
    return false;
    });
    //////////////////////////支持增加
    //反对
    $td = $("<td><a pid=" + json.PId + " href='javascript:void(0)'><img src='86.gif' border=0 /><span>" + json.PDown + "</span></a></td>");
    $tr.append($td);
    /////////////////////////反对增加
    $("a", $td).click(function () {
    var p = $(this).attr("pid"); //取到a标签对象,并取出其属性 pid 的值;
    $a = $(this);
    // alert(p);发送异步请求
    $.get("UpDownClick.ashx?pid=" + p + "&type=2&_=" + Math.random(), function (msg) {
    if (msg == 1) {
    var num = $("span", $a).text();
    num++;
    $("span", $a).text(num);
    } else {
    alert('反对出错');
    }
    });
    });
    /////////////////////////反对增加


    //时间
    $td = $("<td>" + ChangeDateFormat(json.PTime) + "</td>");
    $tr.append($td);

    //操作
    $td = $("<td pid=" + json.PId + "><a href='javascript:void(0)'>编辑</a> <a href='javascript:void(0)'>删除</a></td>");
    $tr.append($td);
    /////////////编辑
    //获取title和url
    $("a:first", $td).click(function () {
    type = 2;

    //把该行的所对应数据库中的pid取出来,放到一个隐藏域中,为编辑该行时使用;
    //var hd = $("td").attr("pid");
    var hd = $(this).parent().attr("pid");
    $("#hdPid").val(hd);
    // alert(hd);

    //alert(type);
    var $tr = $(this).parent().parent();
    // var iaad =;

    var tit = $("td:eq(1) a", $tr).text();
    var ur = $("td:eq(2)", $tr).text();
    //表单元素赋值要注意
    $("#txtTitle").val(tit);
    $("#txtPic").val(ur);
    // alert(1);
    //显示添加层
    $(".coverholder").showCover();

    });
    ///////////////编辑
    ////////////删除
    $("a:last", $td).click(function () {
    //要获得该pid
    $link = $(this);
    var pid = $(this).parent().attr("pid");
    // alert(pid);
    if (confirm("确认删除吗?")) {
    // alert(2);
    //发送ajax请求,删除该条数据
    $.get("DeleteAPic.ashx?pid=" + pid, function (msg) {
    if (msg == 1) {
    //删除成功,浏览器上上删除该记录
    // $link.remove();
    loadAjax(pageIndex);
    }
    });
    }
    });
    ////////////删除

    }

    1.aspx页面:

        $.getJSON("PagingPics.ashx?_=" + Math.random(), "pageIndex=" + pageIndex + "&pageSize=" + 3, function (msg) {  

    ....

    }

    2.请求的PagingPics.ashx:

    string pageIndex = context.Request.QueryString["pageIndex"] ?? "1";
    string pageSize = context.Request.QueryString["pageSize"] ?? "3";
    int pageCount;
    int pI;
    int pS;
    MyPhoto.BLL.MyPhotosBLL bll = new MyPhoto.BLL.MyPhotosBLL();
    List<MyPhoto.Model.Photos> list = null;
    JavaScriptSerializer jss = new JavaScriptSerializer();
    if (int.TryParse(pageIndex, out pI) && int.TryParse(pageSize, out pS))
    {
    list = bll.GetListPic(pI, pS, out pageCount);
    string str = jss.Serialize(list);
    string json = "{\"pageCount\":" + pageCount + ",\"json\":" + str + "}";
    context.Response.Write(json);
    }
    else
    {
    context.Response.Write(-1);
    }

    3.bll.GetListPic()方法:

    MyPhotosDAL dal = new MyPhotosDAL();

    public List<Photos> GetListPic(int pageIndex, int pageSize, out int pageCount)
    {
    return dal.GetListPic(pageIndex, pageSize, out pageCount);
    }

    4.dal.GetListPic()方法:

    public List<Photos> GetListPic(int pageIndex, int pageSize, out int pageCount)
    {
    /*
    @pageIndex int, --第几页
    @pageSize int,--每个页面记录条数
    @pageCount int output--[多少页]根据上面两个
    */
    SqlParameter[] pa = {
    new SqlParameter ("@pageIndex",SqlDbType.Int),
    new SqlParameter ("@pageSize",SqlDbType.Int),
    new SqlParameter("@pageCount ",SqlDbType.Int)
    };
    //输入参数
    pa[0].Value = pageIndex;
    pa[1].Value = pageSize;
    //输出参数
    pa[2].Direction = ParameterDirection.Output;
    DataTable table = SQLHelper.ExecuteOutPut("usp_GetPageData", CommandType.StoredProcedure, pa);
    pageCount = Convert.ToInt32(pa[2].Value);

    List<Photos> list = new List<Photos>();
    foreach (DataRow row in table.Rows)
    {
    Photos p = GetPhotos(row);
    list.Add(p);
    }
    return list;
    }

    5.SQLHelper.ExecuteOutPut("usp_GetPageData", CommandType.StoredProcedure, pa)方法:

    public static DataTable ExecuteOutPut(string cmdText, CommandType type, params SqlParameter[] para)
    {
    DataTable table = new DataTable();
    using (SqlConnection conn = new SqlConnection(str))
    {
    using (SqlCommand cmd = new SqlCommand(cmdText, conn))
    {
    cmd.CommandType = type;
    cmd.Parameters.AddRange(para);
    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
    {
    da.Fill(table);
    return table;
    }
    }
    }
    }

    6.存储过程的写法,如下:

    ALTER proc usp_GetPageData
    @pageIndex int,
    @pageSize int ,
    @pageCount int output
    as
    begin
    declare @justNum int
    select PId, PTypeId, PUserId, PTitle, PUrl, PDes, PClicks, PTime, PUp,
    PDown from (
    select PId, PTypeId, PUserId, PTitle, PUrl, PDes, PClicks, PTime, PUp, PDown
    ,row_number() OVER(ORDER BY PId) as OrderById from Photos ) AS tb
    where OrderById between (@pageIndex-1)*@pageSize+1 and @pageIndex*@pageSize
    select @justNum=count(PId)%@pageSize ,@pageCount=count(PId)/@pageSize from Photos
    IF @justNum!=0
    begin
    set @pageCount=@pageCount+1
    end
    end

    --test
    declare @Count int
    exec dbo.usp_GetPageData 2,3,@Count output
    select @count

    注:书写这个存储过程的时候,我进行了修改,在创建这个存储过程的时候,只需要把ALTER改成Cteate即可创建!

    7.上面六步只是一个简单的分页思路,仅供参考!

  • 相关阅读:
    热修复之类加载机制总结
    socket之tcp如何维护长连接
    sqlite之多线程处理
    android主线程ActivityThread-转载
    线程之ThreadLocal使用
    图片之压缩总结
    线程之交替执行的实例
    git的最常用命令总结
    sqlite之常见的语句
    activity之分析-3分钟看懂Activity启动流程
  • 原文地址:https://www.cnblogs.com/LpRightNow/p/2868938.html
Copyright © 2011-2022 走看看