翻页功能ajax渲染及序号自增

翻页功能序号自增@TOC

这里用到page.js插件

	<script src="js/jquery-1.11.3.js"></script>
	<script src="js/paging.js" type="text/javascript" charset="utf-8"></script>

html内容为列表翻页，列表数据通过ajax从后台获取

<div class="table" >
				<table class="my-table" cellspacing=0 id="pageBox">
					<tr class="list">
						<td style="width:44px;">序号</td>
						<td style="width:168px;">时间</td>
						<td style="width:100px;">编号</td>
						<td style="width:215px;">对象</td>
						<td style="width:316px;">标题</td>
						<td style="width:146pxl">问题</td>
						<td style="width:127px;">操作</td>
					</tr>
				</table>
			</div>
			<script>
		var count
		var page = 1
		$.ajax({
			url: `url`,
			type: "post",
			data: { page },
			dataType: "json",
			async: false,
			success: function (result) {
				count = result.data.pageCount;
				var list = result.data.list
				var html = ""

				for (var j = 0; j < list.length; j++) {
					var name = list[j].name
					var question= list[j].question
					html += `
					<tr class="list">
								<td>${j + 1}</td>
								<td>${list[j].create_t}</td>
								<td>${list[j].cuid}</td>
								<td><div class="td04">${name}<div></td>
									<td><div class="td05">${list[j].title}</div></td>
								<td><div class="td06">${question}<div></td>
								<td><a class="table-btn">编辑</a><a class="table-btn">审核</a></td>
							</tr>
				 `
				}
				$(".my-table").append(html)
			}
		})
			</script>

翻页功能的js

		var options = {
			list: "list",//列表标识
			currentPage: 1,//初始页（选传，默认1）
			pageSize: 1,//每页列表数
			listTotal: count,//列表总数（选传），不传为list总数
			callback: function (page, pageSize) {//翻页回调（可填，可做ajax请求）,不传为纯html切换
				loadData(ajaxDemo(page, pageSize))
			}
		}
		$("#pageBox").paging(options)
		function ajaxDemo(page, pageSize) {
			if (!pageSize) var pageSize = 1;
			var data = {}, arr = [];
			arr = [];
			for (var i = 1; i <= count; i++) {
				arr.push(i);
				for (var k = 1; k < count; k++) {

					if (i == pageSize * k) {
						data[i] = arr;
						arr = [];
					} else if (i == count) {
						data[i] = arr;
					}
				}
			}
			return data[page];
		}
		function loadData(data) {
			$("#pageBox").find(".list:gt(0)").remove()//翻页时刷新面板
			for (var i = 0; i < data.length; i++) {
				var page = data[i]
				var p
				if (page == 1) {
					p = 1
				} else {
					p = 2 * (page - 1) * 10 + 1//列表序号更新
				}
				$.ajax({
					url: ``,
					type: "post",
					data: { page, cuid, start_time, end_time, comobj },
					dataType: "json",
					async: false,
					success: function (result) {
					var list = result.data.list
						var html = ""
						for (var j = 0; j < list.length; j++) {
							var name = list[j].name 
							var question = list[j].question 
							html += `
					<tr class="list">
								<td>${j + p}</td>//列表序号自增
								<td>${list[j].create_t}</td>
								<td>${list[j].cuid}</td>
								<td><div class="td04">${name}<div></td>
								<td><div class="td05">${list[j].title}</div></td>
								<td><div class="td06">${question}<div></td>
								<td><a class="table-btn">编辑</a><a class="table-btn">审核</a></td>
							</tr>
				 `
						}
						$(".my-table").append(html)
				
						
					}
				})
			}
		}

第一页序号是1-20，第二页序号是21-40。。。