AJAX分页短码插件

<?php
if (!defined('WP_DEBUG')) {
	die('Direct access forbidden.');
}

add_action('wp_enqueue_scripts', function () {
	wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
	wp_enqueue_style('shopeo-child-style', get_stylesheet_uri());
});

function intoScript()
{
	wp_enqueue_script('jquerys', get_stylesheet_directory_uri() . '/js/jquery.min.js', array(), '1.0.0', false);
	wp_enqueue_script('vues', get_stylesheet_directory_uri() . '/js/vue.js', array(), '1.0.0', false);
}
add_action('wp_enqueue_scripts', 'intoScript');


add_shortcode("CategoryList", "getCategoryList");
function getCategoryList()
{
	ob_start();
	$termsList = get_terms(['taxonomy' => 'category', 'hide_empty' => false]);
	?>
	<script type="text/javascript">var ajax_url = '<?php echo admin_url(); ?>admin-ajax.php';</script> 
	<div class="CategoryBox" id="CategoryBox">
		<ul class="index_category_list_style" id="index_category_list_style">
			<li class="cureen_index" @click="changeIds('')">全部</li>
			<?php
			foreach ($termsList as $key) {
				echo '<li @click="changeIds(' . $key->term_id . ')">' . $key->name . '</li> ';
			}
			?>
		</ul>
		<div class="CategoryListBox">
			<ul>
				<li v-for="item in artList.artList" :key="item.ID">
					<a :href="item.url">
						<img :src="item.img" alt="">
						<p>{{item.post_name}}</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="pagelist">
			<ul> 
				<li @click="intDatas(111)"><a href="javascript:void(0)">上一页</a></li> 
				<li v-for="its in showPages"  @click="intDatas(its)" :class="pages == its ? 'currens' : ''"><a href="javascript:void(0)">{{its}}</a></li>
				<li @click="intDatas(222)"><a href="javascript:void(0)">下一页</a></li>
			</ul>
		</div>
	</div>
	<script>
		var app = new Vue({
			el: "#CategoryBox",
			data: {
				meg: '这是第一条信息',
				artList: {},
				pages:1,       //当前页
				allPageList:0, //总页数
				totalpages:9,  //每页条数
				showPages:[],
				ids:'',
			},
			created: function () {
				$(function () {
					$('.index_category_list_style li').on('click', function () {
						$(this).addClass('cureen_index').siblings().removeClass('cureen_index');
					});
				})
				this.getArtList('');
				this.getAttrCount();
			},
			methods: {
				changeIds(obj){
					var _this = this;
					_this.ids = obj;
					_this.pages = 1;
					_this.showPages = [];
					_this.getAttrCount();
					_this.getArtList();
				},
				getArtList() {
					var _this = this;
					$.ajax({
						url: ajax_url,
						data: {
							'action': 'getArtListaaa',
							'ids': _this.ids?_this.ids:'',
							'page': _this.pages,
							'totalpages':_this.totalpages
						},
						type: 'post',
						success: function (data) {
							_this.artList = data;
						}
					})
				},
				getAttrCount(){
					var _this = this;
					$.ajax({
						type:'post',
						url:ajax_url,
						data:{
							'action':'getArtListCount',
							'ids':this.ids
						},
						success:function(data){
							console.log(data.countNum);
							_this.allPageList = Math.ceil(data.countNum/_this.totalpages);
							var pagslistArr = _this.changePages(_this.pages,_this.allPageList);
							for(var i=pagslistArr[0];i<=pagslistArr[1];i++){
								_this.showPages.push(i);
							}
							console.log(pagslistArr);
						}
					})
				},
				changePages(tpage,ttotal){
					if(tpage <= 5){
						var start = 1;
						var end = ttotal;
					}else if(tpage > 5 && tpage < ttotal-4){
						var start = tpage-4;
						var end = tpage+4;
					}else{
						var start = ttotal-5;
						var end = ttotal;
					}
					return [start,end];
				},
				intDatas(obj){
					var _this = this;
					if(obj == 111){
                        if(this.pages == 1){
						  return
					    }
					    this.pages = this.pages-1;
						this.getArtList(_this.ids);
					}
					if(obj == 222){
						if(this.pages == this.allPageList){
							return
						}
						this.pages = this.pages+1;
						this.getArtList(_this.ids);
					}else if(obj !== 111 && obj !== 222){
						this.pages = obj;
						this.getArtList(_this.ids);
					}
				}
			},
			mounted: function () {

			}
		})
	</script>
	<?php
	return ob_get_clean();
}

/**获取文章列表 */
add_action("wp_ajax_getArtListaaa", "getArtListaaa");
add_action('wp_ajax_nopriv_getArtListaaa', 'getArtListaaa');
function getArtListaaa()
{
	$ids = $_POST['ids'];
	$pages = $_POST['page'];
	$totalpages = $_POST['totalpages'];
	$arg = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => $totalpages,
		'orderby' => 'date',
		'paged' => $pages,
		'order' => 'DESC', 
	);
	$CountListAtr = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => -1
	);
	if ($ids) {
		$arg['category'] = $ids;
		$CountListAtr['category'] = $ids;
	}
	$artList = get_posts($arg); 
	$artList1 = new WP_Query($CountListAtr);
	$ConutNum = $artList1->post_count;
	foreach ($artList as $key) {
		$key->url = get_permalink($key->ID);
		$key->img = wp_get_attachment_image_src(get_post_thumbnail_id($key->ID), 'medium')[0];
	}
	wp_send_json(array("artList"=>$artList,'countNum'=>$ConutNum));
}


/**获取文章列表 */
add_action("wp_ajax_getArtListCount", "getArtListCount");
add_action('wp_ajax_nopriv_getArtListCount', 'getArtListCount');
function getArtListCount()
{
	$ids = $_POST['ids'];
	$CountListAtr = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => -1
	);
	if ($ids) {
		$CountListAtr['category'] = $ids;
	}
	$artList1 = new WP_Query($CountListAtr);
	$ConutNum = $artList1->post_count;
	wp_send_json(array('countNum'=>$ConutNum));
}