前端用的模块化开发requireJs分页功能（数据是ajax调用所得）

第一首先是html页面的书写，其中分页当中id属性是对应的是JS中pagination插件的一个属性条件

第二看下我所以需要的给那个模板分页代码，基本上跟普通的html页面一样写法就行。

{{each items as result index}}{{/each}}这个是循环表格，取数据

<!--对外投资-->
<script id="body-inverstCount" type="text/html">
    <!--对外投资-->
    <div style="width: 820px ;margin-left: -120px">
        <div id="nav-main-inverstCount" class="intro-head-b1">对外投资<span
                    class="intro-count">45</span>
        </div>
        <div id="_container_invest">
            <div>
                <div class="out-investment-container">
                    {{each items as result index}}
                    <table class="table companyInfo-table" style="margin: 0;width: 820px" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr>
                                <th width="15%">被投资公司名称</th>
                                <th width="15%">被投资法定代表人</th>
                                <th width="19%">注册资本</th>
                                <th width="19%">投资数额</th>
                                <th width="7%">投资占比</th>
                                <th width="15%">注册时间</th>
                                <th width="10%">状态</th>
                                <!--<th width="7%">状态</th>
                                <th width="8%">行业</th>
                                <th width="5%">省份</th>
                                <th width="5%">评分</th>
                                <th width="24%">经营范围</th>-->
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="text-click-color">{{result.name}}</span></td>
                                <td><span class="text-click-color">{{result.legalPerson}}</span></td>
                                <td><span class="">{{result.regCapl}}</span></td>
                                <td><span class="">{{result.amount}}</span></td>
                                <td><span class="c-money-y">{{result.percent}}</span></td>
                                <td><span class="">{{result.foundTime}}</span></td>
                                <td><span class="">{{result.regStatus}}</span></td>
                            </tr>
                        </tbody>
                    </table>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</script>

第三，数据是用的ajax异步调用接口，获取数据

  /*对外投资ajax请求*/

            fn.requestinverstdata=function(){
                $.ajax({
                    url:util.url("nouser/queryInverstByIdAndNameAndPageNumService"),
                    type:"post",
                    data:{
                        "id":"22822", /**待修改**/
                        "name":"北京百度网讯科技有限公司",
                        "pageNum":pagedata.paginationdata.pageNo||"1"
                    }
                }).done(function(msg){
                    pagedata.paginationdata.totalCount=msg.data[0].result.total;

                    console.log("count:",count);

                    util.getData(msg,function (msg) {
                        $.publish('requestinverstdata',msg);
                        /***需要赋值分页参数***/

                        fn.pagination();
                    });
                })
            }
            
            // 调用执行方法
            fn.requestinverstdata();

            /***订阅请求list数据***/
            $.subscribe("requestinverstdata",function(e,data){

                console.log("data:",data);

                /***渲染主要人员模块***/
                util.renderHtml(['body-inverstCount'],data.result,function(){

                })
            });

第四就是用pagination插件写分页，包括样式等

扫描二维码关注公众号，回复： 3061607 查看本文章