dwz分页实现分析

dwz给我们提供了一个很好的列表UI

我对它的分析后将页面分为四个部分

<form id="pagerForm" method="post" action="list_test.php">
    <input type="hidden" name="status" value="${param.status}">
    <input type="hidden" name="keywords" value="${param.keywords}" />
    <input type="hidden" name="pageNum" value="1" />
    <input type="hidden" name="numPerPage" value="${model.numPerPage}" />
    <input type="hidden" name="orderField" value="${param.orderField}" />
</form>

第一部分，该部分是会随着页面下面提交页面显示条数和跳转页面时提交的参数

该部分可以自己添加相应的影藏参数，比如我们获得的页面是搜索结果页面，如果不讲参数附加在这里，那么当我们点击跳转页面时，会发现已经回到了不带搜索参数的查询结果中了。所以我们可以将搜索值存放在这里。

<form onsubmit="return navTabSearch(this);" action="list_test.php" method="post">
    <div class="searchBar">
    
    <!-- 
        <ul class="searchContent">
            <li>
                <label>我的客户：</label>
                <input type="text"/>
            </li>
            <li>
            <select class="combox" name="province">
                <option value="">所有省市</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="天津">天津</option>
                <option value="重庆">重庆</option>
                <option value="广东">广东</option>
            </select>
            </li>
        </ul>
         -->
        <table class="searchContent">
            <tr>
                <td>
                    我的客户：<input type="text" value="123" name="keyword" />
                </td>
                <td>
                    <select class="combox" name="province">
                        <option value="">所有省市</option>
                        <option value="1" selected>北京</option>
                        <option value="2">上海</option>
                        <option value="3">天津</option>
                        <option value="4">重庆</option>
                        <option value="5">广东</option>
                    </select>
                </td>
                <td>
                    建档日期：<input type="text" class="date" name="time" readonly="true" />
                </td>
                <td>
                    <?php 
                        var_dump($_GET);
                        var_dump($_POST);
                    ?>
                </td>
            </tr>
        </table>
        <div class="subBar">
            <ul>
                <li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
                <li><a class="button" href="demo_page6.html" target="dialog" mask="true" title="查询框"><span>高级检索</span></a></li>
            </ul>
        </div>
    </div>

第二部分，该部分是搜索部分，建议将搜索后，依旧将收索关键字放在这里。这样做方便用户的操作。

<div class="panelBar">
        <ul class="toolBar">
            <li><a class="add" href="demo_page4.html" target="navTab"><span>添加</span></a></li>
            <li><a class="delete" href="demo/common/ajaxDone.html?uid={sid_user}" target="ajaxTodo" title="确定要删除吗?"><span>删除</span></a></li>
            <li><a class="edit" href="demo_page4.html?uid={sid_user}" target="navTab"><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="150">
        <thead>
            <tr>
                <th width="80"></th>
                <th width="120">客户号</th>
                <th>客户名称</th>
                <th width="100">客户类型</th>
                <th width="150">证件号码</th>
                <th width="80" align="center">信用等级</th>
                <th width="80">所属行业</th>
                <th width="80">建档日期</th>
            </tr>
        </thead>
        <tbody>
            <tr target="sid_user" rel="1">
                <td>天津农信社</td>
                <td>A120113196309052434</td>
                <td>天津市华建装饰工程有限公司</td>
                <td>联社营业部</td>
                <td>29385739203816293</td>
                <td>5级</td>
                <td>政府机构</td>
                <td>2009-05-21</td>
            </tr>            
        </tbody>
    </table>

第三部分，具体操作部分

<div class="panelBar">
        <div class="pages">
            <span>显示</span>
            <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="200">200</option>
            </select>
            <span>条，共100条</span>
        </div>
        
        <div class="pagination" targetType="navTab" totalCount="100" numPerPage="20" pageNumShown="10" currentPage="1"></div>

    </div>

第四部分，分页部分，需要设置页面相关的参数（加粗部分）和下拉框的被选项，这样就完美显示分页效果了。