关于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,
        ));
    }