<link rel="stylesheet" href="{{ asset('/AdminLTE-master/plugins/datatables/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('/AdminLTE-master/bootstrap/css/bootstrap.css') }}">

<table id="data1" class="table table-bordered table-hover col-md-8">
    <thead>
        <tr
 
>
            <th>ID</th>
            <th>城市</th>
            <th>空間</th>
            <th>預約日期</th>
            <th>姓名</th>
            <th>電話</th>
            <th>提交時間</th>
            <th>狀態</th>
        </tr
 
>
    </thead>
    <tbody>

    @foreach($data as $each)<tr>
            <td><a href="{{ asset('backstage/appointment_info_') }}{{$each->id}}"  target="view_window">{{$each->id}}</a></td>
            <td>{{$each->city}}</td>
            <td
 
>{{$each->space}}</td>
            <td>{{$each->visting_time}}</td>
            <td>{{$each->name}}</td>
            <td>{{$each->phone}}</td>
            <td>{{$each->created_at}}</td>
            <td>
                <input value="{{$each->state}}" id="no{{$each->id}}">
            </td>
        </tr>
    @endforeach</tbody>
</table>

{{--page--}}<script src="{{ asset('/AdminLTE-master/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/plugins/slimScroll/jquery.slimscroll.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/plugins/fastclick/fastclick.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/dist/js/app.min.js')}}"></script>
<script src="{{ asset('/AdminLTE-master/dist/js/demo.js')}}"></script>

<script>

    var table;

    //        翻頁，排序，搜尋
$(function () {
        table = $('#data1').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": false,
            "autoWidth": false,

        });

    });

    function city(city){
        table.column( 1 ).search( city ).draw();

    }

    function state(state){
        table.column( 3 ).search( state ).draw();
    }




</script>

*table.column( 1 ).search( city ).draw();