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="width: 98%"><span>企業名稱</span><input name="企業名稱" disabled type="text" style="width: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;
}