翻页插件

所属分类：分页插件
1993查看评论 (0)
0

插件描述：既可以通过纯 js 方式也可以通过同步或异步加载方式，对列表页进行翻页显示。既可以结合 trs 标签使用，也可以在静态页面中使用。

纯js前端翻页

使用说明

引入相关文件

在 head 标签中引入 css 文件，放在 meta 标签之后即可： 
<link rel="stylesheet" href="http://api.cas.cn/plugin/mypager/css/mypager.css" type="text/css" />
引入 js 文件，在 head 标签中引入两个文件，放在 css 文件之后。jquery 库（如果模板中已经引入，则无需重复引入）和翻页组件 js，确保 jquery.mypager-3.1.min.js 放在 jquery 库的后面： 
<script type="text/javascript" src="http://api.cas.cn/lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://api.cas.cn/plugin/mypager/js/jquery.mypager-3.1.min.js"></script>

准备好 html

在页面中写好放置列表和翻页的容器。 
<div class="ztlb_ld_mainR_box01_list">
	<ul style="min-height:400px;" id="con_list"></ul>
</div>
<div id="pager"></div>

执行 js

在模板的 body 结束标签前，插入以下 js。根据实际情况调整每页记录数、列表项写法、容器 id。 
<script type="text/javascript">
$(function(){
	var mag_name = '<trs_channel field="chnldesc" id="中科院之声电子杂志" autolink="false" />';
	var mag_str="<trs_channels id='owner'><trs_channels id='owner'><trs_channels id='owner' num='10'><trs_channel field='chnldesc' autolink='false' />,</trs_channels></trs_channels></trs_channels>";
	var chnl_arr = mag_str.split(",");

	chnl_arr.pop();

	var href_str="<trs_channels id='owner'><trs_channels id='owner'><trs_channels id='owner' num='10'><trs_channel field='_recurl' />,</trs_channels></trs_channels></trs_channels>";
	var href_arr = href_str.split(",");

	href_arr.pop();

	var time_str="<trs_channels id='owner'><trs_channels id='owner'><trs_channels id='owner' num='10'><trs_documents id='owner'><trs_document field='docreltime' dateformat='yyyy-MM-dd' /></trs_documents>,</trs_channels></trs_channels></trs_channels>";
	var time_arr = time_str.split(",");

	time_arr.pop();

	var pagesize = 15; //每页记录数
	var allcount = chnl_arr.length;
	var pagecount = allcount%pagesize == 0?parseInt(allcount/pagesize): parseInt(allcount/pagesize)+1 ;

	function ajaxShow(params){
		//确认显示页码
		var _nowpage = 1;
		//翻页插件异步调用时，会将页码值传到params中
		if(params != null && params.length > 0){
			$.each(params, function(index, val){
				if(val.name == "page"){
					_nowpage = val.value;
				}
			});
		}
		if(_nowpage >0){
			$("#con_list").html("");
			var startpos = (_nowpage-1) * pagesize;
			var num = _nowpage < pagecount? pagesize : allcount-(pagecount-1)*pagesize;
			var con = "";
			for(var i=0; i < num; i++ ){
				if(i%2 == 1){
					con += '<li class="C_eff7fd"><span class="right">';
				}else{
					con += '<li><span class="right">';
				}
				con += time_arr[startpos+i];
				con += '</span><span>';
				con += '<a href="'+ href_arr[startpos+i] +'" target="_blank">';
				con += mag_name + ' ' + chnl_arr[startpos+i];
				con += '</a></span></li>';
			}
			$("#con_list").append(con);
			$("#con_list").append('<li class="xuxian01" style="margin:15px 0;"></li>');
		}
	}

	ajaxShow([{name : "page", value:"1"}]);

	$("#pager").mypager({
		page: 1, //显示页数
		pagecount: pagecount, //总页数
		allcount: allcount, //总记录数
		type: "ajax", 
		pagename: "page",
		ajaxFunction : ajaxShow
	});
});
</script>

异步js翻页

使用说明

引入相关文件

在模板文件尾部（body结束标签前）引入 jquery 库（如果模板中已经引入，则无需重复引入）和翻页插件 js，确保 jquery.mypager-3.1.min.js 放在 jquery 库的后面： 
<script type="text/javascript" src="http://api.cas.cn/lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://api.cas.cn/plugin/mypager/js/jquery.mypager-3.1.min.js"></script>

准备好 html

在页面中写好放置列表的容器和内容，id 须唯一，请根据实际情况修改 id 和标签。 
<tbody id="content">
	<trs_viewdatas id="channelid:127495" pagesize="20"><!-- pagesize表示每页显示的记录数 -->
	  <tr>
	    <td><trs_viewdata autolink='false' field='ACHIEV_TIME' /></td>
	    <td><a href="http://www.cnic.cas.cn/yfcg/hjqk/index_65345.html?json=<trs_viewdata field='_recurl' />" target="_blank"><trs_viewdata autolink='false' field='ACHIEV_HJMC' /></a></td>
	    <td><trs_viewdata autolink='false' field='ACHIEV_ZYWCR' /></td>
	  </tr>
	</trs_viewdatas>
</tbody>

执行 js

在模板的 body 结束标签前，插入以下 js。根据实际情况调整列表项写法、容器 id等。 
<script type="text/javascript">
$(function(){
	function ajaxShow(params){
		var _nowpage = "";
		var pagecount = 0;
		var allcount = 0;
		//翻页插件异步调用时，会将页码值传到params中
		if(params != null && params.length > 0){
			$.each(params, function(index, val){
				if(val.name == "page"){
					_nowpage = val.value;
				}
			});

			if(_nowpage == ""){
				params.push({name:"page", value: 1});
			}

			$.ajax({
  			type : "get",
  			url : "http://search.cas.cn/sourcedb/achiev_common_json.jsp",
  			jsonp : "cascallback",
				jsonpCallback : "cas_call",
				async: false,
  			dataType : "jsonp",
				data: params,
  			success : function(result){
					var str = "";

					$.each(result.data, function(index, data){
						str += '<tr><td>' + data.achiev_time + '</td>';
						str += '<td><a href="http://www.cnic.cas.cn/yfcg/hjqk/index_65345.html?json='+ data.docpuburl +'" target="_blank">'+ data.achiev_hjmc +'</a></td>';
						str += '<td>'+ data.achiev_zywcr +'</td></tr>';
					});
					$("#content").html(str);
				}
			});
		}
	};
	
	$.ajax({
		type : "get",
		url : "http://search.cas.cn/sourcedb/achiev_common_json.jsp",
		jsonp : "cascallback",
		jsonpCallback : "cas_call",
		async: false,
		dataType : "jsonp",
		beforeSend: function () {
			$("ul.pagination").empty().html('<div id="pager"></div>');
		},
		success : function(result){
			var str = "";

			$.each(result.data, function(index, data){
				str += '<tr><td>'+ data.achiev_time +'</td>';
				str += '<td><a href="http://www.cnic.cas.cn/yfcg/hjqk/index_65345.html?json='+ data.docpuburl +'" target="_blank">'+ data.achiev_hjmc +'</a></td>';
				str += '<td>'+ data.achiev_zywcr +'</td></tr>';
			});
			$("#content").html(str);

			$("#pager").mypager({
				page: 1, //显示页数
				pagecount: result.pagecount, //总页数
				allcount: result.allcount, //总记录数
				type: "ajax",
				pagename: "page",
				//params: search_word,
				ajaxFunction : ajaxShow
			});
		}
	});
});
</script>

同步翻页

使用说明

引入相关文件

在 head 标签中引入 css 文件，放在 meta 标签之后即可： 
<link rel="stylesheet" href="http://api.cas.cn/plugin/mypager/css/mypager.css" type="text/css" />
在模板文件尾部（body结束标签前）引入 jquery 库（如果模板中已经引入，则无需重复引入）和翻页组件 js，确保 jquery.mypager-3.1.min.js 放在 jquery 库的后面： 
<script type="text/javascript" src="http://api.cas.cn/lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://api.cas.cn/plugin/mypager/js/jquery.mypager-3.1.min.js"></script>

准备好 html

在页面中写好翻页的容器。 
<div class="pager" id="pager"></div>
compatibility

讨论这个项目（0）