表格加分页渲染方法

<div class="table-container layui-form" lay-filter="checkbox-form">
    <table class="layui-table">
        <thead>
            <tr>
                <th>用户名</th>
                <th>联系方式</th>
                <th>部门</th>
                <th>区域</th>
                <th>版本</th>
                <th>所属单位</th>
                <th>是否安装</th>
                <th>是否在线</th>
                <th>在线时长</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <div id="page"></div>
</div>

模板

<script id="table-tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
        <tr>
            <td>{{ item.realname  }}</td>
            <td>{{ item.mobile }}</td>
            <td>{{ item.deparetname }}</td>
            <td>{{ item.area }}</td>
            <td>{{ item.version }}</td>
            <td>{{ item.organizename }}</td>
            <td><input disabled type="checkbox" name="close" {{ item.isinstall ? 'checked' : '' }} lay-skin="switch" lay-text="是|否"></td>
            <td>{{ item.online ? '在线' : '离线'}}</td>
            <td>{{ item.onlinetime }}</td>
        </tr>
    {{#  }); }}
    {{#  if(d.length === 0){ }}
        <tr><td colspan="9">暂无数据</td></tr>
    {{#  } }}
</script>

分页器渲染和点击事件

设置全局变量flag = true  当点击分页器后设置flag=false，就不会自动去在去渲染一次了

当点击查询时设置flag = true，重新开启分页

laypage.render({
    elem: 'page',
    limit: 10,
    count: res.total, //数据总数
    jump: function (obj, first) {
        flag = false;
        page = obj.curr;
        //首次不执行
        if (!first) {
            initData.getStatisticalList(page, {
                area: $('#area').val(),
                organize: $('#units').val(),
                deparment: $('#department').val(),
                vision: $('#vision').val(),
                startTime: $('#start-date').val(),
                endTime: $('#end-date').val(),
                fast: ''
            });
        }
    }
});

表格模板渲染 

laytpl($('#table-tpl').html()).render(res.rows.listData, function (html) {
    $('#tbody').html(html);
    // 对开关进行重新渲染
    form.render('checkbox', 'checkbox-form');
});

下拉选择框通过ajax渲染

<select id="units" lay-filter="select-form"></select>

$.ajax({
    url: IP + '/BaseManage/Organize/GetTreeJson',
    dataType: 'json',
    success: function (res) {
        if (res instanceof Array && res.length != 0) {
            var html = '<option value="">全部</option>';
            for (var i = 0; i < res.length; i++) {
                html += '<option value="' + res[i].id + '">' + res[i].text + '</option>';
            }
            $('#units').html(html);
            form.render('select', 'select-form');
        } else {
            $('#units').html('');
        }
    }
});

根据sessionStorage获取主页加载并记忆

var position = sessionStorage.getItem("qiyunFront_indexTab");
if (position) {
    $('.layui-side .layui-nav-item').removeClass('layui-this');
    layui.each($('.layui-side .layui-nav-item'), function () {
        if ($(this).find('a').attr('lay-href') == position) {
            $(this).addClass('layui-this');
        }
    });
    index.loadHome({
        menuPath: position,
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
} else {
    index.loadHome({
        menuPath: 'home/index.html',
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
}

$('.layui-side .layui-nav-item').click(function () {
    var indexTab = $(this).find('a').attr('lay-href');
    sessionStorage.setItem('qiyunFront_indexTab', indexTab);
})


// 这种方法有错误
var position = JSON.parse(sessionStorage.getItem("qiyunFront_tempData"));
if (position && position.tabPosition) {
    $('.layui-side .layui-nav-item').removeClass('layui-this');
    layui.each($('.layui-side .layui-nav-item'), function () {
        if ($(this).find('a').attr('lay-href') == position.tabPosition) {
            $(this).addClass('layui-this');
        }
    });
    index.loadHome({
        menuPath: position.tabPosition,
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
} else {
    index.loadHome({
        menuPath: 'home/index.html',
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
}