layui 之前端分页

背景分析：模糊搜索实现页面局部刷新（ajax），只刷新对应条件的dom和分页。并且对应条件的dom将在后台生成，直接返回给前端，前端替换原来的dom即可。【分页在前端】

html:

  <div class="innerPage content">
        <!--搜索表单-->
        <section class="position form">
            <div class="position_box container">
                <form class="layui-form" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-input-inline types">
                            <select name="work_position" lay-filter="work_position">
                                <option value="">请选择工作地点</option>
                                <if condition="$work">
                                    <foreach name="work" item="vo">
                                        <option value="{$vo.id}">{$vo.name}</option>
                                    </foreach>
                                </if>
                            </select>
                        </div>
                        <div class="layui-input-inline types">
                            <select name="work_type" lay-filter="work_type">
                                <option value="">请选择职位类型</option>
                                <if condition="$type">
                                    <foreach name="type" item="vo">
                                        <option value="{$vo.id}">{$vo.name}</option>
                                    </foreach>
                                </if>
                            </select>
                        </div>
                        <div class="layui-input-inline search">
                            <input type="text" name="work_name" lay-verify="work_name" autocomplete="off"
                                   placeholder='输入关键词搜索更多职位，例如 "工程师"' class="layui-input" id="work_name"/>
                        </div>
                        <div class="layui-input-inline operate">
                            <button type="button" class="layui-btn submit" lay-submit="" lay-filter="searchForm"><img
                                    src="__STATIC__/assets/images/qy3/icon-job-search.svg"><span>搜索</span></button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!--职位列表-->
        <div id="position_data">
            {$join_html}
        </div>

        <section class="pages" id="pageSections">
            <div class="pages_box">
                <!--<img src="__STATIC__/assets/images/qy3/noneData.png" class="noneData">-->
                <div id="join_page" class="join_page"></div>
            </div>
        </section>

    </div>

 

 

js核心

<script>
    var listTotal = 0;
    var pageSize = 0;
    var form_name = "";
    var _url = "{:url('get_html')}"; // 请求的url地址
    pageSize = $("input[name='page']").val(); // 初始化要使用到的每页条数
    listTotal = $("input[name='total']").val(); // 初始化用到的总条数
    /*发送参数*/
    var param = {
        work_position: "",
        work_type : "",
        work_name:"",
        page :1
    }
    layui.use(['laypage', 'form'],function () {
        let form = layui.form;
        let laypage = layui.laypage;
        /*工作地点*/
        form.on('select(work_position)', function(data){
            param.work_position = Number(data.value); // 一级选中的值
            param.page = 1;
            console.log('_pos',param);
            $.ajax({
                url: _url,
                method: "POST",
                data: param,
                success: function (res) {
                    if (res.code ===1) {
                        $('#position_data').html(res.data.html); // 后台返回的dom结构，直接替换原来的dom即可
                        form.render("select"); // 重新渲染select
                        let total = res.data.total_number;
                        pageInit(total, pageSize); // 重新初始化分页，否则分页不会刷新
                    }
                }
            });
        });
        /*职位类型*/
        form.on('select(work_type)', function(data){
            param.work_type = Number(data.value); // 一级选中的值
            param.page = 1;
            console.log('_pos',param);
            $.ajax({
                url: _url,
                method: "POST",
                data: param,
                success: function (res) {
                    if (res.code ===1) {
                        $('#position_data').html(res.data.html);
                        form.render("select");
                        let total = res.data.total_number;
                        pageInit(total, pageSize);
                    }
                }
            });
        });
        /*搜索按钮*/
        form.on("submit(searchForm)", function (data) {
            data.field.page = 1;
            console.log("表单参数",data.field);
            form_name = data.field.work_name;
            $.ajax({
                url: _url,
                data: data.field,
                method:"POST",
                success:function (res) {
                    if (res.code ===1) {
                        $('#position_data').html(res.data.html);
                        let total = res.data.total_number;
                        pageInit(total,pageSize);
                    }
                },
            });
        });
        $("#work_name").on("input",function(e){
            //获取input输入的值
            param.work_name = e.delegateTarget.value; // 实时监听输入框的值，保证每次表单提交的时候都有准确的输入的关键字
        });
    });
    pageInit(listTotal,pageSize);
    /*分页*/
    let tmpListTotal = 0;
    function pageInit(listTotal,pageSize) {

        if(listTotal === 0){
            $("#join_page").hide();

        }else{
            $("#join_page").show();
        }
　　　　这块的判断尤为重要，关乎没有数据时，是否会闪烁分页（备注：没有数据的时候应该显示一张无数据图片，但是分页是前端渲染的，总是会在显示图片之前先显示分页）

        layui.use(['laypage', 'layer'], function() {
            let laypage = layui.laypage
                , layer = layui.layer;

            let showListTotal = listTotal;
            if(listTotal) {
                tmpListTotal = listTotal;
            } else {
                listTotal = tmpListTotal;
            }

            //页码初始化
            laypage.render({
                elem: 'join_page'
                , count: listTotal //数据总数
                ,limit: pageSize // 每页条数
                ,prev:"<"
                ,next:">"
                ,jump: function(obj,first){
                    param.page = obj.curr;
                    if(!first){  // 判断是否是第一页，不是第一页才执行跳转分页操作，否则不执行。
                        $.ajax({
                            url: _url,
                            method: "POST",
                            data: param,
                            success: function (res) {
                                if (res.code ===1) {
                                    console.log('listTotal关键',listTotal);
                                    $('#position_data').html(res.data.html);
                                }
                            }
                        });
                    }

                }
            });
        });
    }
</script>