手写分页

实习期间要做一个条件查询和页面优化的需求实现，本着现学现用的做法用了一两天实现了分页，分页的要点在于：

  1. 当点击下一页时，要把当前的查询条件一起提交到指定 url
  2. 当点击要显示的页面数量时，要把当前的查询条件一起提交到指定 url

这些查询的条件有 已选的 checkbox, 已经输入的文字等
难点在于在提交请求前怎么获取页面上的这些查询条件
解决这个问题的难点在于如何使用 jquery 来配合 css 中的 tag（如 div,css 等）来进行操作。比如：

$('#page_select a').click(function(){
	 alert($(this).attr("href"));
});

 $("#page_limit").change(function() {
	var boxsSelected='';
	$('#box_multicheck input[name="multibox[]"]:checked').each(function(){
		boxsSelected+=this.value+",";
	});
	var ahf=$('#page_select a').attr("href");
	alert(hf);
});

知道了上面这些怎么实现，再配合后台的数据交互，问题就好解决了, 下面是自己已经实现了的效果：

完整的代码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<title>pager demo</title>
</head>
<body>
<?php

//---------------a href start---------------

echo "<center>";
echo "<nav>";
echo "<div id='page_select'>";
echo  "<ul class=\"pagination\">";

//---------------multi checkbox start---------------
echo "<div id='box_multicheck'>";
$preChecked=array(2,6); //box checked before
for ($i = 0; $i < 13; $i++) {
	$sel=in_array($i,$preChecked)? "checked" : "";
echo " <input type='checkbox' name='multibox[]' {$sel} value='{$i}'><label>{$i} &nbsp</label>";
}
echo "</div>";
//---------------multi checkbox end---------------
// echo  "<li>
//       <a href='#' aria-label='Previous'>
//         <span aria-hidden='true'>&laquo;</span>
//       </a>
//     </li>";
$host="http://yii.local/i.php#";
for ($i = 0; $i < 8; $i++) {
echo "<li><a  href='{$host}{$i}' >{$i} </a></li>";
}
echo  "<li>
      <a href='{$host}' aria-label='Next'>
        <span aria-hidden='true'>&raquo;</span>
      </a>
      </li>";

//---------------page limit array  start---------------
echo "每页<select width='50' style='width: 50px' id='page_limit' name=select_demo[]>";
$psb=30;//page limitation selected before
$pageLimits=array(10,30,50,100);
foreach ($pageLimits as $p){
	if ($p==$psb) {
echo "<option selected value=\"{$p}\">{$p}</option>";
	}
	else{
echo "<option value=\"{$p}\">{$p}</option>";
	}
}
echo "</select> 条记录";
//---------------page limit array  end---------------
echo  "</ul>";
echo  "</div>";
echo  "</nav>";
echo "</center>";
//---------------a href end---------------
?>
</body>
</html>
<!-- jQuery 文件。务必在 bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->
<script>
 $("#page_limit").change(function() {
	var boxsSelected='';
	$('#box_multicheck input[name="multibox[]"]:checked').each(function(){
		boxsSelected+=this.value+",";
});
	var ahf=$('#page_select a').attr("href");
	hf="(select change) broswer will jump to:\n "+ahf+"&multibox="+boxsSelected+"&page_limit="+this.value;
	alert(hf);
// 	location.href=hf;  /jump to url
    });

	$('#page_select a').click(function(){
		// alert($(this).attr("href"));
		var boxsSelected='';
		$('#box_multicheck input[name="multibox[]"]:checked').each(function(){
			boxsSelected+=this.value+",";
		});
		var new_url=($(this).attr("href"))+"&multibox="+boxsSelected;
		var alert_new_url="(a href)broswer will jump to:\n "+new_url;
		alert(alert_new_url);
		$(this).attr("href",new_url);
    });
</script>

<style type="text/css">
/* use for style optional design */
/* .button { */
/*   /* display:inline; */ */
/*   margin-left:2px; */
/*   /* display: block; */ */
/*   width: 25px; */
/*   height: 15px; */
/*   background: black; */
/*   /* padding: 10px; */ */
/*   text-align: center; */
/*   border-radius: 2px; */
/*   color: white; */
/*   font-weight: bold; */
/* } */
</style>
</body>
</html>

2015-04-26