tp5 頁面無刷搜索加分頁

記錄一下：tp5分頁加搜索實現頁面無刷方法

index.html代碼示例：

<!--搜索-->
<form class="layui-form serachform" method="post" action="{:url('indexSearch')}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <!--訂單號-->
            <label class="layui-form-label" style="width:3rem;">訂單號</label>
            <div class="layui-input-inline layui-input-ordersn">
                <input type="text" name="ordersn" autocomplete="off" class="layui-input">
            </div>
            <!--支付方式-->
            <label class="layui-form-label" style="width:4rem;">支付方式</label>
            <div class="layui-input-inline layui-input-select">
                <select name="type">
                    <option value="0">請選擇</option>
                    <option value="1">方式1</option>
                    <option value="2">方式2</option>
                </select>
            </div>
            <!--支付狀態-->
            <label class="layui-form-label" style="width:4rem;">支付狀態</label>
            <div class="layui-input-inline layui-input-select">
                <select name="status">
                    <option value="0">請選擇</option>
                    <option value="1">未支付</option>
                    <option value="2">已支付</option>
                </select>
            </div>
            <!--下單時間-->
            <label class="layui-form-label" style="width:4rem;">下單時間</label>
            <div class="layui-input-inline layui-input-startTime">
                <input type="text" name="startTime" id="date" lay-verify="date" placeholder="" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">至</div>
            <div class="layui-input-inline layui-input-endTime">
                <input type="text" name="endTime" id="date1" lay-verify="date" placeholder="" autocomplete="off" class="layui-input">
            </div>
            <span class="layui-btn layui-btn-normal searchOrder">搜索</span>
        </div>
    </div>
</form>
<!--表格列表-->
<div class="layui-form"  id="list">
    <!--表格開始-->
    <table class="layui-table">
        <thead>
        <tr>
            <th>訂單號</th>
            <th>訂單金額</th>
            <th>支付方式</th>
            <th>訂單生成時間</th>
            <th>支付時間</th>
            <th>訂單狀態</th>
        </tr>
        </thead>
        <tbody>
        {volist name="orderList" id="vo"}
        <tr>
            <td>{$vo.ordersn}</td>
            <td>{$vo.orderamount}</td>
            <td>
                {if condition="$vo.paytime"}
                {$vo.paymentname}
                {else /}
                --
                {/if}
            </td>
            <td>{:date('Y-m-d H:i',$vo.addtime)}</td>
            <td>
                {if condition="$vo.paytime"}
                {:date('Y-m-d H:i',$vo.paytime)}
                {else /}
                --
                {/if}
            </td>
            <td>{:get_status($vo.status,'order')}</td>
        </tr>
        {/volist}
        </tbody>
    </table>
    <div class="page">{$pagehtml}</div>
    <!--表格結束-->
</div>
<script>
    //JavaScript代碼區域
    layui.use(['element', 'laydate', 'layer', 'layedit', 'form'], function () {
        var form = layui.form,
            element = layui.element,
            laydate = layui.laydate,
            layedit = layui.layedit,
            layer = layui.layer;
        laydate.render({
            elem: '#date'
            ,min: '{$minDate}'
            ,max: '{maxDate}'
        });
        laydate.render({
            elem: '#date1'
            ,min: '{$minDate}'
            ,max: '{maxDate}'
        });


        //搜索
        var targetUrl = $(".serachform").attr("action");
        $('.searchOrder').on('click',function () {
            var data = $(".serachform").serialize();
            $.ajax({
                type:'post',
                url:targetUrl,
                cache: false,
                data:data,  //重點必須爲一個變量如：data
                dataType:'json',
                success:function(data){
                    if(typeof(data)=='object'){
                        layer.msg(data.msg);
                    }else{
                        layer.msg('查詢完畢');
                        $('#list').html('');
                        $('#list').html(data);
                    }
                },
                error:function(){
                    alert("請求失敗")
                }
            })
        });

        //分頁 給id爲list的元素代理綁定下面所有的a元素"click"事件
        $("#list").on("click", ".pagination a", function () {
            //獲取搜索條件
            var data = $(".serachform").serialize();
            //取a標籤的href即url發送ajax請求
            $.post($(this).attr('href'),data, function (html) {
                //返回數據輸出到id爲list的元素中
                $('#list').html('');
                $('#list').html(html);
            });
            return false;//阻止默認事件和冒泡，即禁止跳轉
        });
    })
</script>

table.html示例：

{__NOLAYOUT__}
<table class="layui-table">
    <thead>
    <tr>
        <th>訂單號</th>
        <th>訂單金額</th>
        <th>支付方式</th>
        <th>訂單生成時間</th>
        <th>支付時間</th>
        <th>訂單狀態</th>
    </tr>
    </thead>
    <tbody>
    {volist name="orderList" id="vo"}
    <tr>
        <td>{$vo.ordersn}</td>
        <td>{$vo.orderamount}</td>
        <td>
            {if condition="$vo.paytime"}
            {$vo.paymentname}
            {else /}
            --
            {/if}
        </td>
        <td>{:date('Y-m-d H:i',$vo.addtime)}</td>
        <td>
            {if condition="$vo.paytime"}
            {:date('Y-m-d H:i',$vo.paytime)}
            {else /}
            --
            {/if}
        </td>
        <td>{:get_status($vo.status,'order')}</td>
    </tr>
    {/volist}
    </tbody>
</table>
<div class="page">{$pagehtml}</div>

php代碼示例：

private $sevens;
public function _initialize() {
    parent::_initialize();
    $this->sevens = strtotime(date('Y-m-d', strtotime('-7 days'))); // 近七天
//    $this->today = strtotime(date('Y-m-d')); // 今日
//    $this->yesterdayStart = strtotime(date('Y-m-d', strtotime('-1 days'))); // 昨日開始
//    $this->yesterdayEnd = strtotime(date('Y-m-d 23:59:59', strtotime('-1 days'))); // 昨日結束
//    $this->lastdayStart = strtotime(date('Y-m-d', strtotime('-2 days'))); // 前日開始
//    $this->lastdayEnd = strtotime(date('Y-m-d 23:59:59', strtotime('-2 days'))); // 前日結束
}
// 訂單列表(近七天)
public function indexOp() {
    $where = ['addtime' => ['>=', $this->sevens],'uid'=>$this->userInfo['numid']];
    $this->funSelect($where);
    $this->assign([
        'minDate'   => date('Y-m-d',$this->sevens),
        'maxDate'   => date('Y-m-d'),
    ]);
    if(request()->isAjax()){
        return $this->fetch('table');
    }else{
        return $this->fetch();
    }
}
private function funSelect($where){
    $orderList = model('order')->where($where)->order('addtime desc')->paginate(10);
    $pagehtml = $orderList->render();
    $this->assign([
        'pagehtml'  => $pagehtml,
        'orderList' => $orderList,
    ]);
}
//搜索
public function indexSearchOp() {
    if(request()->isAjax() && request()->isPost()){
        $ordersn = input('ordersn');
        $type = intval(input('type'));
        $status = intval(input('status'));
        $startTime = preg_replace('/\s/', '', input('startTime'));
        $endTime = preg_replace('/\s/', '', input('endTime'));
        $Arr = [];
        //訂單號
        if($ordersn){
            if (!preg_match('/^\d{18}$/', $ordersn)) {
                return json(['status'=>0,'msg'=>'訂單號有誤']);
            }
            $Arr['ordersn'] = $ordersn;
        }
        //支付方式
        if($type){
            if($type != 1 && $type != 2){
                return json(['status'=>0,'msg'=>'支付方式有誤']);
            }
            $Arr['type'] = $type;
        }
        //支付狀態
        if($status){
            if($status != 1 && $status != 2){
                return json(['status'=>0,'msg'=>'支付狀態有誤']);
            }
            if($status == 1){ //未支付
                $Arr['status'] = 0;
            }else{  //已支付
                $Arr['status'] = 9;
            }
        }
        //下單時間
        if(!(!$startTime && !$endTime)){
            if($startTime && $endTime){
                $startTime = strtotime($startTime);
                $endTime = strtotime($endTime);
                if($startTime > $endTime){
                    return json(['status'=>0,'msg'=>'開始時間應小於結束時間']);
                }
                if($startTime < $this->sevens || $endTime < $this->sevens){
                    return json(['status'=>0,'msg'=>'時間有誤']);
                }
                $endTime = strtotime(date('Y-m-d 23:59:59',$endTime));
                $Arr['addtime'] = ['between',[$startTime,$endTime]];
            }else{
                return json(['status'=>0,'msg'=>'請選擇完整日期']);
            }
        }
        if(!$Arr){
            return json(['status'=>0,'msg'=>'請填寫搜索條件']);
        }
        $Arr['uid'] = $this->userInfo['numid'];
        if(!isset($Arr['addtime'])){
            $Arr['addtime'] = ['>=',$this->sevens];
        }
        $id = model('order')->where($Arr)->value('id');
        if(!$id){
            return json(['status'=>0,'msg'=>'未查到數據']);
        }
        $this->funSelect($Arr);
        return $this->fetch('table');
    }
}