关于js框架 dwz 与 yii的的分页 以及筛选的结合

此为jicheng1014 原创。。。。地址为http://jicheng1014.cnblogs.com

dwz是一个不错的前端框架 但是 注意 所有的后端 都是要自己写的

常见的应用是 有一堆条件作为筛选，之后下面是一个表，如果数据量大的话 就涉及到了分页

由于dwz是前端框架 所以获取数据什么的 就需要自己写了

分页前端其实只需要知道4个东西

1、当前页面

2、当前数据

3、每页的大小

4、数据的行数

但是其实Yii 里本身就有自己的数据显示控件CGridview，理论上应该是封装了分页需要的所有动作，那么怎样把Yii和Dwz的数据结合起来？、

答案是 CActiveDataProvider 这个对象 即model 里search 的返回 因为这个Provider 里面有个属性，Pagination，很明显，那存放的是关于分页的信息。

为了方便，我直接默认设置每页大小为10（Yii默认）

于是我将我的Action改变为 （ps tryGetRequest 为试着获取$_POST 里的值，没有就为“” ）

$dataProvider = $model->search(array(
'pageNum'=>intval($this->tryGetRequest('pageNum'))-1,
'numPerPage'=>$this->tryGetRequest('numPerPage'),

));

$this->renderPartial('index', array(
'list' => $dataProvider->data,
'pagination'=>$dataProvider->getPagination(),
'keyword'=>$model->probe_chinese_name,
'probe_area'=>$model->probe_area,

));

之后search 是我稍微改了下的，加了个对页数的控制，需要注意的是，Yii的Page 是从0开始的 dwz 是从1 开始的，所以需要判断下

public function search($pagination){
if(!isset($pagination)){
return parent::search();
}

$criteria = new CDbCriteria;

//  常规处理的代码之后加点判断。。。

$pageInfo = array();
if(!empty($pagination['numPerPage'])){
$pageInfo['pageSize']=$pagination['numPerPage'];
}
if(!empty($pagination['pageNum'])){
$pageInfo['currentPage']=$pagination['pageNum'];
}

return new CActiveDataProvider($this, array(
'criteria' => $criteria,
'pagination'=> $pageInfo,
));
}

之后在页面里 加入dwz的分页控件，具体数据就从这个pagination 来

<div class="pagination" targetType="navTab"
totalCount="<?php echo $pagination->itemCount ?>" numPerPage="10"
currentPage="<?php echo ($pagination->currentPage!=0)?intval($pagination->currentPage)+1:1; ?>"></div>

之后做一个form 专门来提交分页信息

<form id="pagerForm" onsubmit="return navTabSearch(this)" action="<?php echo Yii::app()->request->getUrl();?>" method="post">
<input type="hidden" name="pageNum" value="1" />
<input type="hidden" name="numPerPage" value="10" />
</form>

至此，分页就能实现了 那么筛选条件呢？

可以把筛选条件加入到这个pagerForm 里面 但是 搜索完毕之后，分页了，搜索条件就丢失了 这里就要注意 每次搜索完毕后一定要将POST 的信息绑定回来

附上完整的源代码

view 的

<div class="pageHeader">
<form id="pagerForm" onsubmit="return navTabSearch(this)" action="<?php echo Yii::app()->request->getUrl();?>" method="post">
<input type="hidden" name="pageNum" value="1" />
<input type="hidden" name="numPerPage" value="10" />
<div class="searchBar">
<table class="searchContent">
<tr>
<td>
探针名称：<input type="text" name="keyword" value= "<?php echo isset($keyword)?$keyword:''; ?>"   />
</td>

<td>
归属地：
<?php echo CHtml::dropDownList('probe_area', $probe_area,
GxHtml::listDataEx(ProbeArea::model()->findAllAttributes(null, true)),array("empty"=>"请选择")
); ?>
</td>

<td>
建档日期：<input type="text" class="date" readonly="true" />
</td>
</tr>
</table>
<div class="subBar">
<ul>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
</ul>
</div>
</div>
</form>
</div>
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar">
<li><a class="add" href="<?php echo $this->createUrl("Create"); ?>" target="dialog"><span>添加所属规划</span></a></li>
<li><a class="edit"  href="<?php echo $this->createUrl("ProbeArea/index") ?>" target="dialog" rel="areaList" ><span>管理所属规划</span></a></li>
<li><a class="edit" href="<?php echo $this->createUrl("Update") ?>?id={template_id}" target="dialog"><span>修改</span></a></li>
<li class="line">line</li>
<li><a class="icon" href="demo/common/dwz-team.xls" target="dwzExport" targetType="navTab" title="实要导出这些记录吗?"><span>导出EXCEL</span></a></li>
</ul>
</div>
<table class="table" width="100%" layoutH="138">
<thead>
<tr>
<th><?php echo Yii::t("app","ID");?></th>
<th><?php echo Yii::t("app","Probe Chinese Name");?></th>
<th><?php echo Yii::t("app","Hostname");?></th>
<th><?php echo Yii::t("app","ProbeType|ProbeTypes");?></th>
<th><?php echo Yii::t("app","Lng");?></th>
<th><?php echo Yii::t("app","Lat");?></th>
<th><?php echo Yii::t("app","ProbeArea");?></th>
<th><?php echo Yii::t("app","User|Users");?></th>
<th><?php echo Yii::t("app","Add Time");?></th>
<th><?php echo Yii::t("app","TestTemplate|TestTemplates");?></th>
</tr>
</thead>
<tbody>
<?php foreach ($list as $model): ?>
<tr target="template_id" rel="<?php echo $model->id ?>">
<td><?php echo $model->id; ?></td>
<td><?php echo $model->probe_chinese_name; ?></td>
<td><?php echo $model->hostname; ?></td>
<td><?php echo $model->probeType; ?></td>
<td><?php echo $model->lng; ?></td>
<td><?php echo $model->lat; ?></td>
<td><?php echo $model->probeArea; ?></td>
<td><?php echo $model->user; ?></td>
<td><?php echo $model->add_time; ?></td>
<td><?php echo CHtml::link("查看探针部署地图", $this->createUrl("details", array("id" => $model->id)), array("target" => "navTab")); ?></td>

</tr>
<?php endforeach; ?>

</tbody>
</table>
<div class="panelBar">
<div class="pages">
<span>每页有10条，共<?php echo $pagination->itemCount ?>条</span>
</div>

<div class="pagination" targetType="navTab"
totalCount="<?php echo $pagination->itemCount ?>" numPerPage="10"
currentPage="<?php echo ($pagination->currentPage!=0)?intval($pagination->currentPage)+1:1; ?>"></div>
</div>
</div>

Controller的

public function actionIndex() {

$model= ProbeInfo::model();
if(isset($_POST["keyword"])){
$model->probe_chinese_name = $_POST["keyword"];
}
if (isset($_POST["probe_area"])) {
# code...
$model->probe_area = $_POST["probe_area"];
}

$dataProvider = $model->search(array(
'pageNum'=>intval($this->tryGetRequest('pageNum'))-1,
'numPerPage'=>$this->tryGetRequest('numPerPage'),

));

$this->renderPartial('index', array(
'list' => $dataProvider->data,
'pagination'=>$dataProvider->getPagination(),
'keyword'=>$model->probe_chinese_name,
'probe_area'=>$model->probe_area,

));
}

model 的

public function search($pagination){
if(!isset($pagination)){
return parent::search();
}

$criteria = new CDbCriteria;

$criteria->compare('id', $this->id);
$criteria->compare('probe_chinese_name', $this->probe_chinese_name, true);
$criteria->compare('hostname', $this->hostname, true);
$criteria->compare('probe_type', $this->probe_type);
$criteria->compare('lng', $this->lng);
$criteria->compare('lat', $this->lat);
$criteria->compare('probe_area', $this->probe_area);
$criteria->compare('user_id', $this->user_id);
$criteria->compare('add_time', $this->add_time, true);
$criteria->compare('test_template_id', $this->test_template_id);

$pageInfo = array();
if(!empty($pagination['numPerPage'])){
$pageInfo['pageSize']=$pagination['numPerPage'];
}
if(!empty($pagination['pageNum'])){
$pageInfo['currentPage']=$pagination['pageNum'];
}

return new CActiveDataProvider($this, array(
'criteria' => $criteria,
'pagination'=> $pageInfo,
));
}