ThinkPHP 数据分页 带查询条件

应用场景：

从数据库拉取数据，页面内用select筛选数据，分页后点击下一页，select选中值没有被提交，导致查询条件失效。

解决思路：

为分页{$page}所在的<div>中绑定onclick事件，点击时向控制器XXAction.class.php传一个httprequest，可用post方法，在Action中用$_REQUEST接收，设置为数据库查询条件，同时应该将查询条件再次传回模板.html文件中，保持select选中值。

步骤：

• 约定：控制器为FormAction.class.php，模板为read.html，分页方法不赘述，用Page的show()方法即可。
• <div>绑定onclick事件，参数回传。

<div class="green-black" id="page" onclick="divide_show()"><{$page}></div>

<script>内函数：

function divide_show(){   var v = document.getElementById('gradeselect');var grade = (v.options[v.selectedIndex].value);//获取select选中值var u = document.getElementById('majorselect');var major = (u.options[u.selectedIndex].value);var xmlhttp = createRequest();xmlhttp.open("POST","__URL__/read",true);//向控制器内read()函数发送HTTP requestxmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("gradeselect="+grade+"&majorselect="+major);//发送参数值   };

function createRequest(){var xmlhttp;//注意浏览器的兼容if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();}else{  // code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){  if (xmlhttp.readyState==4 && xmlhttp.status==200){    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  }  };  return xmlhttp;   }

此时，点击分页的任何一个按钮，都会把查询条件的参数值回传到控制器中。

• 控制器接收参数，设置查询条件和传回模版的参数

if($_REQUEST['gradeselect']!=NULL && $_REQUEST['gradeselect']!='all'){$selected['grade'] = $_REQUEST['gradeselect']; //selected用于设置select选中值，用于下一次回传参数时查询条件的保持$condition['grade'] = array('eq',$_REQUEST['gradeselect']); //数据库查询条件}if($_REQUEST['majorselect']!=NULL && $_REQUEST['majorselect']!='all'){$selected['major'] = $_REQUEST['majorselect']; $condition['major'] = array('eq',$_REQUEST['majorselect']);}

用json将查询条件传回模板，用于设置select选中值，从而保持查询条件。

$this->json = json_encode($selected);

• 模板接收参数，并设置select选中值，js代码：

window.onload = function(){   var a = {$json};   var grade = a['grade'];   var major = a['major'];   if(grade=="all"){   $("[id=grade_"+grade+"]").attr("selected","selected"); //注意id或value的唯一性，可引用id或value来设置属性值   }   else{   $("[value="+grade+"]").attr("selected","selected"); //这里引用到的是一个option标签   }   if(major=="all"){   $("[id=major_"+major+"]").attr("selected","selected");   }   else{   $("[value="+major+"]").attr("selected","selected");   }      }; 

有时候发现上述jquery方法没有奏效，因为用id所引用的element并不是一个option（当然，实际上它确实是一个option），眼拙没有看出为什么，所以用下面这种方法也可以设置select选中值。

var gs = document.getElementById(id+"grade"); //gs是一个select标签   for (x=0;x<gs.options.length;x++) {     //遍历select所有option           if(gs.options[x].text == grade){     //与所传参数值相等的option被设为选中               gs.options[x].selected = true;                           break;                }            } 

结语：

上述方法亲测有效，欢迎讨论。据说ajax分页方法可以带参，不过没试出来，主要是模板向控制器传参数一直没有做出来，后来一步步就做成了这个样子 - -！