使用handlebars渲染分页组件

// 渲染函数
function renderTpl(tplSelector, data, htmlSelector) {
    var t = $(tplSelector).html(),
        f = Handlebars.compile(t),
        h = f(data);
    $(htmlSelector).html(h);
}

// helper的写法
Handlebars.registerHelper({
    addOne: function(index) {
        return index+1;
    },
    transformat: function(value) {
        if(value == 0){
            return "男";
        }else{
            return "女";
        }
    }
});

// 构造分页数组
function formatPag(pagData, curPage) {
    var arr = [];
    var total = pagData;
    var cur = curPage;

    // 处理到上一页的逻辑
    var pre = {};
    pre.index = cur - 1;
    pre.text = '‹';

    if (cur != 1) {
        pre.clickable = true;
    }

    arr.push(pre);

    // 处理到cur页前的逻辑
    if (cur <= 3) {
        for (var i = 1; i < cur; i++) {
            var pag = {};
            pag.text = i;
            pag.index = i;
            pag.clickable = true;
            arr.push(pag);
        }
    } else {
        // 如果cur>5,那么cur前的页要显示为...
        var pag = {};
        pag.text = 1;
        pag.index = 1;
        pag.clickable = true;
        arr.push(pag);
        var pag = {};
        pag.text = '...';
        arr.push(pag);
        // 当前页前面2个页数显示出来
        for (var i = cur - 1; i < cur; i++) {
            var pag = {};
            pag.text = i;
            pag.index = i;
            pag.clickable = true;
            arr.push(pag);
        }
    }

    // 处理当前页
    var pag = {};
    pag.text = cur;
    pag.index = cur;
    pag.cur = true;
    arr.push(pag);

    // 处理cur页后的逻辑
    if (cur >= total - 2) {
        for (var i = cur + 1; i <= total; i++) {
            var pag = {};
            pag.text = i;
            pag.index = i;
            pag.clickable = true;
            arr.push(pag);
        }
    } else {
        // 如果cur < total - 4, 那么cur后的页面显示为...
        // 显示以当前页后面的2个页数
        for (var i = cur + 1; i < cur + 2; i++) {
            var pag = {};
            pag.text = i;
            pag.index = i;
            pag.clickable = true;
            arr.push(pag);
        }

        var pag = {};
        pag.text = '...';
        arr.push(pag);
        var pag = {};
        pag.text = total;
        pag.index = total;
        pag.clickable = true;
        arr.push(pag);
    }

    // 处理到下一页的逻辑
    var next = {};
    next.index = cur + 1;
    next.text = '›';

    if (cur != total) {
        next.clickable = true;
    }

    arr.push(next);
    return arr;
}

你可能感兴趣的:(使用handlebars渲染分页组件)