mui SQL分页加搜索功能 案例

项目分页操作，可使用mui，使用SQL在数据库里查数据

1、html

<!--默认头部-->
<header class="mui-bar mui-bar-nav myheader">
    <a href="../index.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title head-title">成品入库列表</h1>
    <i class="mui-icon mui-icon-search" onclick="mysearch()"></i>
</header>
<!--搜索头部-->
<header class="mui-bar mui-bar-nav myheader2" style="display：none；">
    <em class="mui-icon mui-icon-left-nav mui-pull-left cancelleft"></em>
    <div class="searchInput">
        <input type="text" name="企业名称" value="" placeholder="请输入企业名称" id="searchValue">
        <i class="mui-icon mui-icon-search" onclick="search()"></i>
    </div>
    <span class="searchCancel">取消</span>
</header>
<div class="content" style="margin-top:46px;">
    <!--原料采购-->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper budinesscon">
            <div class="mui-scroll">
                <!-- 数据列表,存放后台数据位置-->
                <div class="mui-table-view mui-table-view-chevron rawcondata"></div>
                <!-- 下拉加载更多-->
                <div class="mui-pull-bottom-pocket mui-block">
                    <div class="mui-pull">
                        <div class="mui-pull-loading mui-icon mui-spinner mui-hidden"></div>
                        <div class="mui-pull-caption mui-pull-caption-down">上拉显示更多</div>
                    </div>
                </div>
            </div>
            <div class="mui-scrollbar mui-scrollbar-vertical">
                <div class="mui-scrollbar-indicator"></div>
            </div>
    </div>
</div>
<div class="mixfirm"></div>  <!--弹出框-->

2、js

var row=10*(page-1);

select top 10 *  from productRequest id not in ( select top "+row+" id from productRequest order by ID desc) order by ID desc

//初始化变量
var count = 0;
var page=0;  //页码
$(function () {
        mui.init({
            pullRefresh: {
                container: '#pullrefresh', //此处id是想要上拉加载内容处的id
                down: {
                    callback: pulldownRefresh
                },
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }
        });
        //下拉加载
        function pulldownRefresh() {
            $(".rawcondata").html("");
            $("#searchValue").val("");
            $(".myheader").show();
            $(".myheader2").hide();
            $(".mui-pull-caption-down").text("");
            setTimeout(function() {
                page =1;  //初始化page为1
                var row=10*(page-1);   //row 依次为 0 10 20 30...
                inits(row,null);  //初始化SQL方法
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            }, 1500);
        }

        // 上拉加载具体业务实现
        function pullupRefresh() {
            setTimeout(function() {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count<0)); //参数为true代表没有更多数据了。
                page ++;
                var val = $("#searchValue").val();
                if(val !="") {  //当搜索框有值时，第二个形参为input值，否则传null
                    var row=10*(page-1);
                    inits(row,val);
                }else {
                    var row=10*(page-1);
                    inits(row,null);
                }
            }, 1500);
        }

        if (mui.os.plus) {
            mui.plusReady(function() {
                setTimeout(function() {
                    mui('#pullrefresh').pullRefresh().pullupLoading();
                }, 1000);

            });
        } else {
            mui.ready(function() {
                mui('#pullrefresh').pullRefresh().pullupLoading();
            });
        }
    });

    //初始化 sql
    function inits(row,vals){
        var compid = $('#companyid').val();
        if(vals!=null) {  //搜索框有值时,进行模糊查询
            sql("select top 10 *  from productRequest where company like '%"+vals+"%' and id not in ( select top "+row+" id from productRequest order by ID desc) order by ID desc", function (data) {
                resour(data,row);  //初始化查数据
            });
        }else {
            sql("select top 10 *  from productRequest id not in ( select top "+row+" id from productRequest order by ID desc) order by ID desc", function (data) {
                resour(data,row);  //初始化查数据
            });
        }

    }
    //查找的数据
    function resour(data,row) {
        for (var i = 0; i < data.length; i++) {
            var str = '<div id="s' +(row+ i) + '">' +
                    '<div class="t-form w" id="f2"  style="height: 167px;">' +
                    '<div class="col01" style=" 98%"><span>企业名称</span><input name="企业名称" disabled type="text" style="75%;"></div>' +
                    '<div class="col12"><span>入库单号</span><input name="入库单号" disabled type="text"></div>' +
                    '<div><span>申请编码</span><input name="申请编码" disabled type="text"></div>' +
                    '<div class="col22"><span>操作人</span><input name="操作人" disabled type="text"></div>' +
                    '<div><span>单据状态</span><input name="单据状态" disabled type="text"></div>' +
                    '<div class="col32"><span>操作时间</span><input name="操作时间" disabled type="text"></div>' +
                    '<div><span>原料编码</span><input name="原料采购编码" disabled type="text"></div>' +
                    '</div>' +
                    '<div class="tablenav clearfix">' +
                    '<div class="t-btns dete"><button><span class="glyphicon glyphicon-trash" style="margin-right: 2px; top: 2px;"></span>删除</button><input name="ID" type="hidden" value=""></div>' +
                    '<div class="navbottom details"><input type="hidden" name="ID" value="" /><input type="hidden" name="入库单号" value="" /><span>详情</span><span class="mui-icon mui-icon-arrowright"></span></div>' +
                    '</div> ' +
                    '</div>';
            $(".rawcondata").append(str);
            setRowData($("#s" +(row+ i)), data[i]);   //此处是ttyu平台直接通过name填充数据的方法，可以使用拼字符的方式把变量拼到上面内容字符串中；
        }
        //数据为空时，弹框定时弹窗
        if(data.length == 0) {
            $(".mixfirm").show();
            mixfirm("没有更多数据");
            setTimeout(function() {
                $(".mixfirm").hide();
            },1000);
        }
    }

    //点击搜索按钮
    function mysearch() {
        $(".myheader").hide();
        $(".myheader2").show();
        $(".rawcondata").html("");  //清空内容
    }
    //点击返回键，将page变为初始值
    $(".cancelleft").click(function() {
        $(".myheader2").hide();
        $(".myheader").show();
        $("#searchValue").val("");
        $(".rawcondata").html("");
        page =1;
        var row=10*(page-1);
        inits(row,null);
    });
    //点击取消按钮
    $(".searchCancel").click(function() {
        $("#searchValue").val("");
        $(".rawcondata").html("");
    });
    /*定时弹框*/
    function mixfirm(obj) {
        var strs = '<h4>'+obj+'</h4>';
        $(".mixfirm").html(strs);
        $(".mixfirm").show();
    }
    /*点击search搜索*/
    function search() {
        $(".rawcondata").html("");
        var val = $("#searchValue").val();
        if(val !="") { 
            page =1;
            var row=10*(page-1);
            inits(row,val);
        }else {
            $(".mixfirm").show();
            mixfirm("输入内容为空");
            setTimeout(function() {
                $(".mixfirm").hide();
            },1000);
        }
    }

3、弹框css

/*弹框css*/
.mixfirm {
    width: 141px;
    height: 40px;
    background-color: #1084FB;
    opacity: 0.8;
    position: fixed;
    bottom: 50%;
    left: 50%;
    margin-left: -62px;
    margin-top: -20PX;
    text-align: center;
    display: none;
    padding: 0 10px;
    z-index: 30;
    border-radius: 30px;
}
.mixfirm h4 {
    margin-top: 13px;
    color: #fff;
}