ajax请求后的分页表 - JS

Question

在下面的代码中，当我使用搜索框对数据进行分页和过滤时。

在我的ajax请求成功后，默认状态下的表会返回没有分页的所有数据。

当我刷新页面时，表格再次被分页，在ajax请求之后，分页不再是

为什么会这样？

HTML

<table class="table" id="table" >
    <thead>
        <tr> 
            <th></th>
            <th colspan="5"></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach($products as $product) 
            <tr>
                <td width="600">{{$product->name }}</td>    
            </tr>
        @endforeach    
    </tbody>
</table>
{{$products->links()}}

JS

<script>
    $(document).ready(function () {
        var typingTimer;                //timer identifier
        var doneTypingInterval = 100;  //time in ms (5 seconds)

        $("#myInput").on('keyup', function () {
            clearTimeout(typingTimer);
            // if ($('#myInput').val() | ) {
                typingTimer = setTimeout(doneTyping, doneTypingInterval);
            // }
        });
    });

    //user is "finished typing," do something
    function doneTyping() {
        var key = $('#myInput').val();

        $.ajax({
            url: '/admin/dashboard/order/food/search?myInput='+key,
            type: 'GET',
            beforeSend: function () {
                // $("#table").slideUp('fast');
            },
            success: function (data) {
                console.log(data);
                $("#table").slideDown('fast');

                var table = $("#table tbody");

                table.html("");
                $.each(data, function(idx, elem){
                    table.append(
                        "<tr><td><input type='checkbox' onclick='return order(this)' data-food='"+JSON.stringify(elem)+"' id='"+elem.id+"' name='"+elem.name+"' value='"+elem.price+"'  data-id="+elem.id+" class='sub_chk' /></td><td width='600' >"+elem.name+"</td><td>"+elem.price+"</td><tr>"
                    );
                });
            }            
        });
    }
</script>