layuipage：初始化分页+添加元素+关键字搜索+删除（全）

    <div class="layui-row layui-col-space30" id="orderList">

    </div>
    <div class="layui-col-md12 layui-col-sm12">
        <div id="demo0"></div>
    </div>


<script src="/layuiadmin/layui/layui.js"></script>
<script src="/js/jquery-3.5.1.js"></script>
<script>
    $(function(){
        var page=1; //设置首页页码
        var limit=5;  //设置一页显示的条数
        var total;    //总条数
        var loaded = false
        getPage()
        loadData()


        function loadData(){
            $.ajax({
                type:"get",
                url:"media/query",//对应controller的URL
                async:false,
                dataType: 'json',
                data:{
                    "pageIndex":page,
                    "pageSize":limit,
                    "title":$("input[name='title']").val(),
                    "car_id":$("select[name='car_id']").val()
                },
                success:function(ret){
                    total=ret.data.total;  //设置总条数

                    var data1=ret.data.data;
                    var html='';
                    for(var i=0;i<data1.length;i++){
                        html+=' <div class="layui-col-md2 layui-col-sm4" data-id="'+data1[i].Id+'">\n' +
                            '            <div class="cmdlist-container">\n' +
                            '                <a href="javascript:;">\n' +
                            '                    <img style="width:275px;height:248px" src="'+data1[i].img_url+'">\n' +
                            '                </a>\n' +
                            '                <a href="javascript:;">\n' +
                            '                    <div class="cmdlist-text">\n' +
                            '                        <p class="info">'+data1[i].title+'</p>\n' +
                            '                        <div class="price">\n' +
                            '                            <p>关联产品</p>\n' +
                            '                            <b>'+data1[i].relate_cars+'</b>\n' +
                            '                            <span class="layui-badge-rim del" style="float: right;">删除</span>\n' +
                            '                            <span class="layui-badge-rim" style="float: right;margin-right: 1rem">'+data1[i].type_title+'</span>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                </a>\n' +
                            '            </div>\n' +
                            '        </div>'
                    }
                    if (html.length < 1)
                    {
                        html = '<p style="padding: 100px 600px;">暂无相关资源</p>'
                        $("#demo0").css('display','none');
                    }else{
                        $("#demo0").css('display','block');
                    }
                    $("#orderList").empty().append(html);

                }
            });
        }

        function getPage(){
            if (!loaded) {
                loaded =true;
                layui.use([ 'table','laypage',], function(){
                    var form = layui.form
                        ,laypage = layui.laypage;

                    laypage.render({
                        elem: 'demo0' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: total, //数据总数，从服务端得到
                        limit:limit,   //每页条数设置
                        jump: function(obj, first){
                            //obj包含了当前分页的所有参数，比如：
                            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            // console.log(obj.limit); //得到每页显示的条数
                            page=obj.curr;  //改变当前页码
                            limit=obj.limit;
                            //首次不执行
                            if(!first)
                            {
                                loadData()  //加载数据
                            }
                        }
                    });

                    //监听搜索
                    form.on('submit(LAY-app-contlist-search)', function(data){

                        loadData()
                        getPage()
                    });

                    //添加资源
                    $('#add').click(function() {
                        layer.open({
                            type: 2,
                            title: '增加媒体资源',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area: ['100%', '100%'],
                            content: '/admin/setting/media/add'
                        })
                    })

                    //编辑资源
                    $("#orderList").on('click','.info',function(re){

                        layer.open({
                            type: 2,
                            title: '增加媒体资源',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area: ['100%', '100%'],
                            content: '/admin/setting/media/add?id='+$(re.currentTarget).parents('.layui-col-md2').attr('data-id')
                        })
                    })

                    //删除资源
                    $("#orderList").on('click','.del',function(re){
                         var id = $(re.currentTarget).parents('.layui-col-md2').attr('data-id')
                        // $(re.currentTarget).parents('.layui-col-md2').remove()
                        // console.log(total);
                        // total--
                        // getPage()
                        // if (total == 1) {
                        //     $("#orderList").empty().append('<p style="padding: 100px 600px;">暂无相关资源</p>');
                        // }else{
                        //     total--
                        //     getPage()
                        // }


                        layer.confirm('确定删除么', function(index){
                            $.ajax({
                                type:"get",
                                url:"/admin/setting/media/del",//对应controller的URL
                                async:false,
                                dataType: 'json',
                                data:{
                                    "id":id,
                                },
                                success:function(ret){
                                    if (ret.code == 200) {
                                        //loadData()
                                        page = parseInt($(".layui-laypage-curr em:last-child").text())
                                        loadData()
                                        getPage()
                                    }else{
                                       layer.msg('删除失败')
                                    }
                                    layer.close(index);
                                }
                            });
                        });

                    })

                });
            }else{
                layui.use([ 'table','laypage',], function(){
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'demo0' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: total, //数据总数，从服务端得到
                        limit:limit,   //每页条数设置
                        jump: function(obj, first){
                            //obj包含了当前分页的所有参数，比如：
                            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            // console.log(obj.limit); //得到每页显示的条数
                            page=obj.curr;  //改变当前页码
                            limit=obj.limit;
                            //首次不执行
                            if(!first)
                            {
                                //loadData(page,limit)  //加载数据
                                loadData()
                            }
                        }
                    });


                });
            }



        }
    })
</script>