layui实现异步请求后台分页

使用layui实现异步请求后台分页操作，用到table和laypage两个模块，详细资料见官网。

• 数据表格
• 分页

直接贴代码，看起来比较简单，初次使用还是要费点心思的

HTML

<table id="table" lay-filter="table"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看</a>
</script>
<div id="footPageBox"></div>

JavaScript

layui.extend({
    request: "{/}/static/js/control/layui/myModules/request",
    utils: "{/}/static/js/control/layui/myModules/utils",
});
var labelType = 0;
var searchContent;
$(function() {
    initTableData();
    $('.menu ul li').click(function() {
        $(this).addClass('menuSelect').siblings().removeClass('menuSelect');
        labelType = $(this).attr("itemid");
        initTableData();
    });
    $('#search').click(function() {
        searchContent = $('#searchContent').val();
        initTableData();
    });
});
function initTableData() {
    layui.use(['jquery', 'table', 'layer', 'laypage', 'form', 'request', 'utils'],
    function() {
        $ = layui.jquery;
        var request = layui.request;
        var table = layui.table;
        var laypage = layui.laypage;
        var cols = [[{
            type: "numbers",
            title: '序号',
            width: 60,
            event: 'sel',
            align: "center",
            style: 'cursor: pointer;'
        },
        {
            field: 'developcode',
            title: '项目代码',
            width: 190,
            event: 'sel',
            align: "center"
        },
        {
            field: 'prjname',
            title: '项目名称',
            width: 190,
            event: 'sel',
            align: "center"
        },
        {
            field: 'phasename',
            title: '事项名称',
            width: 190,
            event: 'sel',
            align: "center"
        },
        {
            field: 'approvedate',
            title: '申报时间',
            event: 'sel',
            align: "center"
        },
        {
            field: 'flowphasestateStr',
            title: '办理状态',
            event: 'sel',
            align: "center"
        },
        {
            fixed: 'right',
            title: '操作',
            event: 'sel',
            toolbar: "#barDemo",
            align: "center"
        }]];

        function getbj(pages, searchVal) {
            var param = {
                page: pages,
                limit: 15,
                keyWords: searchVal,
                type: labelType
            };
            request.ajaxAsync('/prjinfo/getbjdata', param, true,
            function(res) {
                if (res.status === 0) {
                    var totalNum = res.data.total;
                    table.render({
                        elem: '#table',
                        count: totalNum,
                        page: false,
                        limit: 15,
                        cols: cols,
                        first: true,
                        data: res.data.records,
                        done: function() {
                            laypage.render({
                                elem: 'footPageBox',
                                count: totalNum,
                                // 记得加这个，不然脚标一直在第一页
                                curr: pages,
                                limit: 15,
                                limits: [15, 20, 25],
                                jump: function(obj, first) {
                                    if (!first) {
                                        getbj(obj.curr, searchContent);
                                    }
                                }
                            });
                        }
                    });
                } else {
                    top.layer.msg(res.msg);
                }
            },
            "get");
        }
        // 初始化第一页数据
        getbj(1, "");
    });
}

有些代码是多余的或者其他，自己捋一下逻辑就好，能看懂，不多说了。

欢迎批评，指正！