ajax简单jQuery分页控件

最新推荐文章于 2021-12-02 07:00:12 发布

djk8888

最新推荐文章于 2021-12-02 07:00:12 发布

阅读量145

点赞数

分类专栏： JS代码文章标签： ajax html jquery

本文链接：https://blog.csdn.net/djk8888/article/details/120745398

版权

JS代码专栏收录该内容

76 篇文章 1 订阅

订阅专栏

本文介绍了一个使用JavaScript实现的分页功能，包括创建分页HTML、处理分页事件以及通过Ajax进行数据加载。示例代码展示了如何根据当前页码和每页显示的行数动态更新页面，并与后台MVC控制器进行交互，获取并展示表格数据。

摘要由CSDN通过智能技术生成

主要js:

function CreatePager(itemCount, pageCount, pageIndex, pageSize) {
	var size = 10;  //默认每页显示10行
	if (pageSize != null && pageSize != undefined && pageSize != "") {
		size = parseInt(pageSize);
	}

	var prePage = parseInt(pageIndex) - 1;
	if (prePage <= 0) {
		prePage = 1;
	}
	var nextPage = parseInt(pageIndex) + 1;
	if (nextPage > parseInt(pageCount)) {
		nextPage = pageCount;
	}

	var firsturl = "javascript:";
	var preurl = "javascript:";
	var nexturl = "javascript:";
	var lasturl = "javascript:";
	if (pageIndex == 1) {
		firsturl += "void(0);";
		preurl += "void(0);";
		nexturl += "ajaxPageChange(" + nextPage + ", " + size + ");";
		lasturl += "ajaxPageChange(" + pageCount + ", " + size + ");";
	}
	else if (pageIndex == pageCount) {
		firsturl += "ajaxPageChange(1, " + size + ");";
		preurl += "ajaxPageChange(" + prePage + ", " + size + ");";
		nexturl += "void(0);";
		lasturl += "void(0);";
	}
	else {
		firsturl += "ajaxPageChange(1, " + size + ");";
		preurl += "ajaxPageChange(" + prePage + ");";
		nexturl += "ajaxPageChange(" + nextPage + ");";
		lasturl += "ajaxPageChange(" + pageCount + ");";
	}

	if (pageCount <= 1) {
		firsturl = "javascript:void(0)";
		preurl = "javascript:void(0)";
		nexturl = "javascript:void(0)";
		lasturl = "javascript:void(0)";
	}

	var pageTr = "<div class='p3'>共<span style='color:red'>" + itemCount + "</span>条数据&nbsp;&nbsp;&nbsp;&nbsp;              每页显示行数&nbsp;&nbsp;<input type=\"text\" id=\"tbCurrentPageSize\" style='width:30px;' onkeyup=\"value=value.replace(/[^\\d]/g,'')\" maxlength=\"3\" value=\"" + size + "\"/>&nbsp;&nbsp;&nbsp;&nbsp;                                         第<span id='_pageIndex'>" + pageIndex + "</span>页/" + "共<span id=\"pageCount\">" + pageCount
		+ "</span>页&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"" + firsturl
		+ "\"" + (pageIndex == 1 ? " style='cursor:not-allowed;' " : "") + ">首页</a>&nbsp;<a href=\"" + preurl
		+ "\"" + (pageIndex == 1 ? " style='cursor:not-allowed;' " : "") + ">上一页</a>&nbsp;<a href=\"" + nexturl
		+ "\"" + (pageIndex == pageCount ? " style='cursor:not-allowed;' " : "") + ">下一页</a>&nbsp;<a href=\"" + lasturl
		+ "\"" + (pageIndex == pageCount ? " style='cursor:not-allowed;' " : "") + ">尾页</a>&nbsp;转到&nbsp;<input type=\"text\" id=\"tbCurrentPageIndex\" style='width:20px;' onkeyup=\"value=value.replace(/[^\\d]/g,'')\" maxlength=\"4\" value=\"" + pageIndex + "\"/>&nbsp;页<input type=\"button\" id=\"btnGO\" value=\"GO\" onclick='BtnGoPage();'/>" + "</div>";

	return pageTr;
}

function BtnGoPage() {
	var pageIndex = 1;
	if ($("#tbCurrentPageIndex").val() != "") {
		pageIndex = $("#tbCurrentPageIndex").val();
	}
	if (pageIndex > parseInt($("#pageCount").html())) {
		pageIndex = $("#pageCount").html();
	}
	if (pageIndex <= 0) {
		pageIndex = 1;
	}

	var size = 10;  //默认每页显示10行
	if ($("#tbCurrentPageSize").val() != "") {
		if (parseInt($("#tbCurrentPageSize").val()) > 500) {
			alert("每页显示的行数不能超过500条");
			return;
		}

		size = $("#tbCurrentPageSize").val();
	}

	ajaxPageChange(pageIndex, size);
}

html:

<div id="pageTb" class="pageTb" style="text-align: center; margin-top: 10px"></div>

<div id="pageTb" class="pageTb" style="text-align: center; margin-top: 10px"></div>
 <table border="1" id="table1" style="text-align:center;width:100%;">
        <thead style="background-color: cornflowerblue; color:white;">
            <tr>
                <td>品牌</td>
                <td>品线</td>
                <td>品类</td>
                <td>仓库</td>
                <td>品名</td>
                <td>编码</td> 
                <td>总数量</td>
                <td>总金额</td>
            </tr>           
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <div id="pageTb" class="pageTb" style="text-align: center; margin-top: 10px"></div>

调用此js:

<script>
    //创建分页
    function PagerMaker(total, allPage, pageIndex, size) {
        $(".pageTb").empty();
        $(".pageTb").append(CreatePager(total, allPage, pageIndex, size));
    }
    //分页事件
    function ajaxPageChange(currentPageIndex, pageSize) {
        ReportPage(currentPageIndex);
    }
    //分页数据
    function ReportPage(pageIndex) {
        var index = pageIndex;//页码
        var size = 500;//每页条数
        var startDate = $("#startDate").val();
 
        $("#tbody").empty();
        $.ajax({
            type: "GET",
            data: {
                "startDate": startDate,        
                "pageIndex": index,
                "pageSize": size,
            },
            url: "/Controller/Action",
            dataType: "json",
            success: function (request) {
                //拼表格
                $.each(request.data, function (i, field) {
                    var html = ""; 
                    html += "<tr>"; 
                    html += "<td>" + field.品牌 + "</td>";
                    html += "<td>" + field.品线 + "</td>";
                    html += "<td>" + field.品类 + "</td>";
                    html += "<td>" + field.仓库 + "</td>";
                    html += "<td>" + field.品名 + "</td>";
                    html += "<td>" + field.编码 + "</td>";
                    html += "<td>" + field.总数量 + "</td>";
                    html += "<td>" + field.总金额 + "</td>";
                    html += "</tr>";
                    $("#tbody").append(html);
                });       
                PagerMaker(request.total, request.allPage, pageIndex, size);//创建分页  
            },
        });
</script>

MVC:

//分页查询
public ActionResult Action(string startDate,int pageIndex,int pageSize)
{
    string json = "[]";
    if (!string.IsNullOrEmpty(startDate))
    {
       int total = 0;//总记录数
       int allPage = 0;//总页数  
       DataTable dt = bll.GetPage(startDate, pageIndex, pageSize, out total, out allPage);
       json = JsonConvert.SerializeObject(new { total = total, allPage = allPage, data = dt, });
     }
    return Content(json);
}

public int GetAllPage(int total, int pageSize)
{
   int allPage = 0;//共几页
   allPage = total / pageSize;//共几页 = 总行数 / 每页行数 
   allPage += total % pageSize == 0 ? 0 : 1;//不足一页也算一页

   return allPage;
}

样式: