ajax分页

Posted 游称

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax分页相关的知识,希望对你有一定的参考价值。

MVC cshtml

第一次加载:

@*信息*@
  <div id="f">
        @{ List<know> klist = new knowdata().select1();
           foreach (know k in klist)
           {
            <div style="width: 100%; height: 30px; line-height: 30px; margin-top: 10px; cursor: pointer;" onclick="change(@k.ids)">
                <div style="float: left">@k.title</div>
                <div style="float: right">@k.ktime</div>
            </div>
           }
        }
    </div>

分页按钮设置:

 @*分页*@
    <div style=" margin-left: 70%;position:relative;height:50px;">
        当前第<span id="sp-number">1</span><input type="button" class="btn btn-primary" value="上一页" id="btn1" />
        <input type="button" class="btn btn-primary" value="下一页" id="btn2" />

        @{
            List<know> klist1 = new knowdata().select();
            int cd = Convert.ToInt32(Math.Ceiling(klist1.Count() * 1.0 / 5));
        
            @:共<label id="lab1">@cd</label>页
        }
    </div>

js里:

<script>

    var pageCount = 5;
    var pageNumber = 1;
    //上一页
    document.getElementById("btn1").onclick = function () {
        pageNumber--;
        if (pageNumber < 1) {

            pageNumber = 1;
        }
        else {
            Load(pageCount, pageNumber);
        }
    };
    //下一页
    document.getElementById("btn2").onclick = function () {
        pageNumber++;
        var ss = $("#lab1").text();
        if (pageNumber > ss) {
            pageNumber = ss;
        }
        else {
            Load(pageCount, pageNumber);
        }
    };
    //分页加载
    function Load(count, number) {
        $.ajax({
            url: "/ajax/Kload.ashx",
            data: { "count": count, "number": number },
            type: "post",
            dataType: "json",
            success: function (data) {
                document.getElementById("f").innerHTML = "";
                for (i in data) {
                    var end = "<div style=\"width: 100%; height: 30px; line-height: 30px; margin-top: 10px;cursor:pointer;\" onclick=\"change(" + data[i].ids + ")\">";
                    end += "<div style=\"float: left\">" + data[i].con + "</div>";
                    end += "<div style=\"float: right\">" + data[i].ntime + "</div>";
                    end += "</div>";

                    document.getElementById("f").innerHTML += end;
                }
                document.getElementById("sp-number").innerHTML = number;

            }
        });
    };

ajax里:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using aihu.Models;
namespace aihu.ajax
{
    /// <summary>
    /// Kload 的摘要说明
    /// </summary>
    public class Kload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            List<know> klist = null;
            int c = Convert.ToInt32(context.Request["count"]);
            int n = Convert.ToInt32(context.Request["number"]);
            string json = "[";
            using (aihuDataContext con = new aihuDataContext())
            {
                //int cou= Convert.ToInt32(Math.Ceiling(con.news.Count() * 1.0 / c));
                //if (n > cou)
                //{ nlist = null; }
                //else
                //{
                klist = con.know.Skip((n - 1) * c).Take(c).ToList();
                //}
            }
            int count = 0;
            foreach (know k in klist)
            {
                if (count > 0)
                { json += ","; }
                json += "{\"con\":\"" + k.title + "\",\"ntime\":\"" + k.ktime + "\",\"ids\":\"" + k.ids + "\"}";
                count++;
            }
            json += "]";
            context.Response.Write(json);
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

以上是关于ajax分页的主要内容,如果未能解决你的问题,请参考以下文章

ajax 分页完全代码整理

ajax 分页完全代码整理

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

请高人讲解java ajax实现分页的思路

kaminari ajax 分页不更新分页

ajax分页代码