手写分页

Posted 2021-11-25 liyazi

<tr>
                <td>
                    <input type="button" value="|<" onclick="first()" />
                    <input type="button" value="<<" onclick="prev()" />
                    <input type="text" value="1" id="PageIndex" />
                    <input type="button" value=">>" onclick="next()" />
                    <input type="button" value=">|" onclick="last()" />
                </td>
            </tr>

这是手写分页前台代码

点击空间之后获取onclick事件，调用ajax请求后台

 $(function () {
        GetData();
    })
    var MaxPagerCount = 1;
    function GetData() {
        var pageIndex = $("#PageIndex").val();
        $.ajax({
            url: ‘/Default1/Show‘,
            type: ‘get‘,
            data: { pageindex: pageIndex},
            dataType: ‘json‘,
            success: function (data) {
                $("#aaa").empty();
                MaxPagerCount = data.PageCount;
                $(data).each(function () {
                    $("#aaa").append("<tr><td>" + this.ID + "</td><td>" + this.Name + "</td></tr>");
                })
            }
        })
    }

页面首次加载，请求后台查询数据库，返回查询到的数据进行绑定

 public ActionResult Index()
        {
            return View();
        }
        int PageCount = 0;
        [HttpGet]
        public List<dsdf> Show(int pageindex=1)
        {
            string str = "select * from Address";
            DataTable dt = DBHelper.GetTable(str);
            List<Stu> s =JsonConvert.DeserializeObject<List<Stu>>(JsonConvert.SerializeObject(dt));
            var linq = (from a in s
                       select a).Skip((pageindex - 1) * 5).Take(5);
            if (linq.Count() % 5 == 0)
            {
                 PageCount = linq.Count() / 5;
            }
            else {
                 PageCount = linq.Count() / 5+1;
            }
            dsdf df = new dsdf();
            df.PageCount = PageCount;
            return JsonConvert.DeserializeObject<List<dsdf>>(JsonConvert.SerializeObject(linq));
          
        }

首次加载后台代码

把查询到的数据用Linq语句进行分页

Skip是跳过多少条，Take是从你跳过的位置开始取多少条数据

 function first() {
        $("#PageIndex").val(1);
        GetData();
    }

    function last() {
        $("#PageIndex").val(MaxPagerCount);
        GetData();
    }

    function prev() {
        var pageindex = $("#PageIndex").val() - 1;
        if (pageindex < 1)
            pageindex = 1;

        $("#PageIndex").val(pageindex);
        GetData();
    }

    function next() {
        var pageindex = parseInt($("#PageIndex").val()) + 1;
        if (pageindex > MaxPagerCount)
            pageindex = MaxPagerCount;
        $("#PageIndex").val(pageindex);
        GetData();
    }

根据你前台获取的点击事件对你定义的变量进行加减，确认你要到达哪一页