关于分页及模板

模板

应用模板需要先引入template-web.js文件

<script src="../jq/template-web.js"></script>

通过ajax将用户信息放入模板

$.post(
    'http://localhost:8080/user/find',//发送路径
    {
    name:$('#findname').val(),
    id:$('#findage').val()
    },//传到后台的变量
    function (res) {
        if (res == null) {
            alert("没有查询到符合条件的用户信息")
        } else {
            let json={
                'list':res
            }；用json方式接一下
            let html = template('ababa', json);//将json数据指定给id=ababa的标签应用
            $('#box2').append(html);//将选然后的模板插入到制定位置
                        
        }
    },
    'json'
)

指定模板

<script id="ababa" type="text/html">
    {{each list as red}}
        id={{red.id}}</br>
        name={{red.name}}</br>
        age={{red.age}}</br>
        birthday={{red.birthday}}<br>
        <hr>
    {{/each}}
</script>

分页

分页应用的GitHub，需要下载后引用一个js文件mricode.pagination.js

<script src="../jq/mricode.pagination.js"></script>

模板插入位置代码

<div class="col-lg-6" id="box2">
    <ul id="artul" class="fly-list">
        //模板插入位置
    </ul>
    //分页插件，页数按键
    <div style="text-align: center">
        <div id="page" ></div>
         </div>
</div>

模板

<script id="replymodel" type="text/html">
    {{each list as red}}
        <li>
            id={{red.id}}</br>
            name={{red.name}}</br>
            age={{red.age}}</br>
            birthday={{red.birthday}}<br>
            <hr>
        </li>
    {{/each}}
</script>

js部分

//判断是否初始化
if($("#page").pagination()){
    $("#page").pagination('destroy');//销毁初始化
};
$("#page").pagination({
        pageIndex:0,
        pageSize:1,
        pageBtnCount : 6,
        firstBtnText : "首页",
        lastBtnText : "尾页",
        prevBtnText : "上一页",
        nextBtnText :"下一页",
        remote: {
            url: 'http://localhost:8080/user/page',
            success: function (data) {
            // data为ajax返回数据
            var html=template("replymodel",data);
            $('#artul').html('');
            $('#artul').append(html)
        },
        totalName:'total'
    }
})