前端分页

resources/views/admin/print/print_all.blade.php

@@ -304,6 +304,7 @@
         }
 
 
+
     //数组重排
     var tmp_arr = [];
 
@@ -314,6 +315,7 @@
     count_list = tmp_arr;
 
 
+
     var vm = new Vue({
 
         el: '#vue',
@@ -326,11 +328,6 @@
 
             next: function () {
 
-                for (var key in count_list)
-
-                    show_list.push(count_list[key]);
-
-
                 if (state % 20 == 0 && state != 0) {
 
                     show_list.splice(0, show_list.length);
@@ -347,6 +344,8 @@
 
                 }
 
+                console.log(show_list);
+
                 if (count_list.length > 20)vm.has_next = true;
 
             },

resources/views/admin/sta/sta_all.blade.php

@@ -1,18 +1,20 @@
-
 @extends('layouts.datatable')
-    @section('table')
+@section('table')
 
-        <link rel="stylesheet" href="{{asset('css/style.css')}}">
+    <link rel="stylesheet" href="{{asset('css/style.css')}}">
 
-        <style>
-            table{
-                max-width: 100%;
-            }
-            td{
-                word-wrap:break-word;
-                word-break:break-all;
-            }
-        </style>
+    <style>
+        table {
+            max-width: 100%;
+        }
+
+        td {
+            word-wrap: break-word;
+            word-break: break-all;
+        }
+    </style>
+
+    <div id="vue">
 
         <div class="row">
             <div class="col-md-12" id="print">
@@ -24,7 +26,7 @@
                         <table class="table table-bordered table-striped" style="width: 3500px;">
                             <thead>
                             {{--<tr>--}}
-                                {{--<td colspan="31" style="font-size: 25px; text-align: center">街坊项目拆迁统计表</td>--}}
+                            {{--<td colspan="31" style="font-size: 25px; text-align: center">街坊项目拆迁统计表</td>--}}
                             {{--</tr>--}}
                             <tr>
                                 @for($i=1;$i<32;$i++)
@@ -66,321 +68,42 @@
                             </tr>
                             </thead>
                             <tbody>
-                            @foreach($table[1] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->total_money }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->money_home_jchae }}</td>
-                                    <td>{{ $value->money_home_tchae }}</td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[2] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->chaichuje }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[3] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->linshibu }}</td>
-                                    <td>{{ $value->banqianbu }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->canbu }}</td>
-                                    <td>{{ $value->total }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[4] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->quanj }}</td>
-                                    <td>{{ $value->chaj }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->zongj }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[5] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->yuqij }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[6] as $key=>$value)
+                            <template v-for="value of list">
                                 <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->anzhi }}</td>
-                                    <td>{{ $value->banqian }}</td>
-                                    <td>{{ $value->dibu }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->other }}</td>
-                                    <td>{{ $value->total }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
+                                    <td>@{{ value.num }}</td>
+                                    <td>@{{ value.bzc_name }}</td>
+                                    <td>@{{ value.bzc_addr }}</td>
+                                    <td>@{{ value.bzc_cardid }}</td>
+                                    <td>@{{ value.bzc_tel }}</td>
+                                    <td>@{{ value.youzheng_area }}</td>
+                                    <td>@{{ value.wuzheng_area }}</td>
+                                    <td>@{{ value.fangbu }}</td>
+                                    <td></td>
+                                    <td>@{{ value.tingyuan | isNaN + value.kongyuan | isNaN}}</td>
+                                    <td>@{{ value.zhuangxiu }}</td>
+                                    <td>@{{ value.gouzhu }}</td>
+                                    <td>@{{ value.tingchan | isNaN + value.tingye| isNaN  }}</td>
+                                    <td>@{{ value.linshibu | isNaN + value.anzhi | isNaN }}</td>
+                                    <td>@{{ value.banqianbu }}</td>
+                                    <td>@{{ value.dibu }}</td>
+                                    <td>@{{ value.quanj }}</td>
+                                    <td>@{{ value.chaj }}</td>
+                                    <td></td>
+                                    <td>@{{ value.chaichuje | isNaN +value.canbu | isNaN + value.other | isNaN + value.chaiqian| isNaN  }}</td>
+                                    <td>@{{ value.total_money | isNaN  value.total | isNaN  value.zongj | isNaN  value.yuqij | isNaN + value.total | isNaN   }}</td>
+                                    <td>@{{ value.hours }}</td>
+                                    <td>@{{ value.huiqian_area }}</td>
+                                    <td>@{{ value.huiqian_home_area }}</td>
+                                    <td>@{{ value.huiqian_shang_area }}</td>
+                                    <td>@{{ value.huiqian }}</td>
+                                    <td>@{{ value.money_home_jchae | isNaN + value.yingjiao | isNaN }}</td>
+                                    <td>@{{ value.money_home_tchae | isNaN + value.yingtui | isNaN }}</td>
+                                    <td>@{{ value.table_time }}</td>
+                                    <td></td>
+                                    <td>@{{ value.sub_description }}</td>
                                 </tr>
-                            @endforeach
-                            @foreach($table[7] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td>{{ $value->youzheng_area }}</td>
-                                    <td>{{ $value->wuzheng_area }}</td>
-                                    <td>{{ $value->fangbu }}</td>
-                                    <td></td>
-                                    <td>{{ $value->tingyuan }}</td>
-                                    <td>{{ $value->zhuangxiu }}</td>
-                                    <td>{{ $value->gouzhu }}</td>
-                                    <td>{{ $value->tingchan }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->chaiqian }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[8] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td>{{ $value->youzheng_area }}</td>
-                                    <td>{{ $value->wuzheng_area }}</td>
-                                    <td>{{ $value->fangbu }}</td>
-                                    <td></td>
-                                    <td>{{ $value->tingyuan }}</td>
-                                    <td>{{ $value->zhuangxiu }}</td>
-                                    <td>{{ $value->gouzhu }}</td>
-                                    <td>{{ $value->tingchan }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->chaiqian }}</td>
-                                    <td>{{ $value->hours }}</td>
-                                    <td>{{ $value->huiqian_area }}</td>
-                                    <td>{{ $value->huiqian_home_area }}</td>
-                                    <td>{{ $value->huiqian_shang_area }}</td>
-                                    <td>{{ $value->huiqian }}</td>
-                                    <td>{{ $value->yingjiao }}</td>
-                                    <td>{{ $value->yingtui }}</td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
-                            @foreach($table[9] as $key=>$value)
-                                <tr>
-                                    <td>{{ $value->num }}</td>
-                                    <td>{{ $value->bzc_name }}</td>
-                                    <td>{{ $value->bzc_addr }}</td>
-                                    <td>{{ $value->bzc_cardid }}</td>
-                                    <td>{{ $value->bzc_tel }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->fangbu }}</td>
-                                    <td></td>
-                                    <td>{{ $value->kongyuan }}</td>
-                                    <td></td>
-                                    <td>{{ $value->gouzhu }}</td>
-                                    <td>{{ $value->tingye }}</td>
-                                    <td></td>
-                                    <td> </td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->other }}</td>
-                                    <td>{{ $value->chaiqian }}</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                    <td>{{ $value->table_time }}</td>
-                                    <td></td>
-                                    <td>{{ $value->sub_description }}</td>
-                                </tr>
-                            @endforeach
+                            </template>
+
                             </tbody>
                         </table>
                     </div>
@@ -388,23 +111,117 @@
             </div>
         </div>
 
-        <a class="btn btn-success" target="_blank" href="{{ url('/print/10') }}">打印</a>
-        {{--<button class="btn btn-success" onclick="printed('print')">打印</button>--}}
-
-        <script>
-            function printed(printpage)
-            {
-
-                var headstr = "<html><head><title></title></head><body>";
-                var footstr = "</body>";
-                var newstr = document.all.item(printpage).innerHTML;
-                var oldstr = document.body.innerHTML;
-                document.body.innerHTML = headstr+newstr+footstr;
-                window.print();
-                document.body.innerHTML = oldstr;
-                return false;
+
+        <div align="center" class="btn">
+            <button class="btn btn-primary" value="上一页" v-on:click="prev()" v-if="has_prev"></button>
+            <a class="btn btn-success" target="_blank" href="{{ url('/print/10') }}">打印</a>
+            <button class="btn btn-primary" value="下一页" v-on:click="next()" v-if="has_next"></button>
+        </div>
+
+    </div>
+
+
+    <script src="{{ asset('js/vue.min.js') }}"></script>
+
+    <script>
+
+        var table = JSON.parse('{!! json_encode($table) !!}');
+
+        var count_list = [], show_list = [], state = 0;
+
+        var count_length = 0;
+
+        //数组合并
+
+        for (var t in table)
+
+            for (var v in table[t]) {
+
+                if (typeof (count_list[table[t][v].num]) != 'undefined')  count_list[table[t][v].num] = Object.assign(count_list[table[t][v].num], table[t][v]);
+
+                else {
+
+                    count_list[table[t][v].num] = table[t][v];
+
+                    count_length++;
+
+                }
+
+            }
+
+
+        //数组重排
+        var tmp_arr = [];
+
+        for (var key in count_list)
+
+            tmp_arr.push(count_list[key]);
+
+        count_list = tmp_arr;
+
+
+        var vm = new Vue({
+
+            el: '#vue',
+            data: {
+                list: show_list,
+                has_prev: false,
+                has_next: false
+            },
+            methods: {
+
+                next: function () {
+
+                    if (state % 20 == 0 && state != 0) {
+
+                        show_list.splice(0, show_list.length);
+
+                        vm.has_prev = true;
+
+                    }
+
+                    for (var i = 0; i < 20 && state < count_list.length - 1; i++) {
+
+                        state++;
+
+                        show_list.push(count_list[state]);
+
+                    }
+
+                    if (count_list.length > 20)vm.has_next = true;
+
+                },
+
+                prev: function () {
+
+                    if (state <= 20)return;
+
+                    show_list.splice(0, show_list.length);
+
+                    for (var i = 0; i < 20 && state >= 0; i++) {
+
+                        state--;
+
+                        show_list.push(count_list[state]);
+
+                    }
+
+                }
+            },
+            filters: {
+                isNaN: function (value) {
+
+                    if (!value) return 0;
+                    return value;
+
+                }
             }
-        </script>
+
+        });
+
+        vm.next();
+
+    </script>
 
 
-    @endsection
+@endsection