bootstrap Paginator 动态加载失败问题解决

问题：

在使用Paginator分页时，用了网上找到的代码，大佬写一半的东西，对萌新来说真是……令人头秃：

原文地址https://blog.csdn.net/zk_1325572803/article/details/87967808?utm_source=distribute.pc_relevant.none-task

js部分：

	//初始化页面
	$(function(){
		getPageOfMemo(1);
	});

	// 分页函数
	function getPageOfMemo(page) {
		var element = $('#pageLimit');
		element.html("");		//清空分页
		var typeName = $("#querys").val();		//搜索值
		var pageSize = 15;
		var aQuery = {'typeName': typeName, 'pageNum':page,'pageSize':pageSize};
		var url = "http://localhost:8080/mypage/index";

		$.ajax({
			url: url,
			type:'post',
			data: aQuery,
			success: function(data){
				var totalPages;
				if (data.list != null) {
					totalPages = data.pages;
					//writeBody(data.list);		//写入页面数据

					var options = {		//分页
						bootstrapMajorVersion : 3,		//版本
						currentPage : page, // 当前页数
						numberOfPages : 10, // 显示按钮的数量
						totalPages : totalPages, // 总页数
						itemTexts : function(type, page, current) {
							switch (type) {
								case "first": return "<<";
								case "prev": return "<";
								case "next": return ">";
								case "last": return ">>";
								case "page": return page;
							}
						},
						// 点击事件，用于通过Ajax来刷新整个list列表
						onPageClicked : function(event, originalEvent, type, page) {
							getPageOfMemo(page);
						}
					};
                    //以下是我为实现动态显示列表加的
					var html='';
					$.each(data.list, function (i, obj) {
						html += '<li><i class="icon ion-person"></i> <div>'+obj.name+'aaa</div> <p>'+obj.message+'</p></li>';
					});
					element.empty();
					element.append(html);
                    //以上是我为动态显示列表加的

					element.bootstrapPaginator(options);

				}
			},
			error: function(){
				alert("请求出错！");
			}
		});
	};

 网页部分：

<div id="Paginator" aria-label="Page navigation" class="page">
    <ul id="pageLimit" class="pagination">
    </ul>
</div>

我发现在动态加载li时根本加载不出来，只能加载个分页栏。

改进：

可以看到ul里面根本没有被加进来，找了整整一下午原因，发现element.bootstrapPaginator(options);这东西会将ul里面的内容覆盖掉，具体测试可以这样前后加两个alert：

所以想到，ul这个东西只是用来弄索引栏的，而具体的分页内容应该要重新搞一个div，试了一下果然可以了。

修改之后的全部代码为：

html：

<!-- 分页列表 -->
					<ul class="contact-icon" id="messageList">
					</ul>
					<!-- 分页栏 -->
					<div id="Paginator" aria-label="Page navigation" class="page">
						<ul id="pageLimit" class="pagination">
						</ul>
					</div>

js代码：

<script type="text/javascript">
	//初始化页面
	$(function(){
		getPageOfMemo(1);
	});

	// 分页函数
	function getPageOfMemo(page) {
		var element = $('#pageLimit');
		element.html("");		//清空分页
		var typeName = $("#querys").val();		//搜索值
		var pageSize = 15;
		var aQuery = {'typeName': typeName, 'pageNum':page,'pageSize':pageSize};
		var url = "http://localhost:8080/mypage/index";

		$.ajax({
			url: url,
			type:'post',
			data: aQuery,
			success: function(data){
				var totalPages;
				if (data.list != null) {
					totalPages = data.pages;
					//writeBody(data.list);		//写入页面数据

					var options = {		//分页
						bootstrapMajorVersion : 3,		//版本
						currentPage : page, // 当前页数
						numberOfPages : 10, // 显示按钮的数量
						totalPages : totalPages, // 总页数
						itemTexts : function(type, page, current) {
							switch (type) {
								case "first": return "<<";
								case "prev": return "<";
								case "next": return ">";
								case "last": return ">>";
								case "page": return page;
							}
						},
						// 点击事件，用于通过Ajax来刷新整个list列表
						onPageClicked : function(event, originalEvent, type, page) {
							getPageOfMemo(page);
						}
					};
					var html='';
					$.each(data.list, function (i, obj) {
						html += '<li><i class="icon ion-person"></i> <div>'+obj.name+'aaa</div> <p>'+obj.message+'</p></li>';
					});
					$('#messageList').empty();
					$('#messageList').append(html);
					alert(element.html());
					element.bootstrapPaginator(options);

				}
			},
			error: function(){
				alert("请求出错！");
			}
		});
	};
</script>

结果图：