Vuejs 的 Ajax 调用和 dataTable

Question

我正在使用Vuejs和dataTable来开展我的一个项目。我进行了Ajax调用并将数据推送到数组中。之后，我使用v-for在<tr>标签中循环数据。但大多数时间它都不起作用。表在页面加载完成后就会加载..接收ajax数据需要一点时间。以下是输出内容。它显示表中没有可用数据 因此，搜索选项无法正常工作。我想使用setTimeout函数（这是一个坏主意）在一段时间后加载表格。有什么正确的方法吗？下面是代码分享:

    new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    phone: response.data[i].user.phone,
                                    email: response.data[i].user.email,
                                    courseId: response.data[i].course.id,
                                    courseName: response.data[i].course.course_title,
                                    expiryDate: response.data[i].expiry_date,
                                    shares: response.data[i].number_of_shares,
                                    expired: (response.data[i].expired == 1),
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        })
                    },
                },
                mounted(){
                    this.getData();
                },
            });
//data table
$(function () {
            setTimeout(()=> {          
                $("#temp-enroll").DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": true,
                    "autoWidth": false
                });
            },1000);
        });

in blade:

- Noob Coder

Answer 1

好的，我尝试了这个，并且完全符合我的要求。感谢大家的支持。

new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    ............................
                                    ......................
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        }).then(()=>{
                          $("#temp-enroll").DataTable({
                            "paging": true,
                            "ordering": false,
                            "info": true,
                            "autoWidth": false
                             });
                          });
                    },
                },
                mounted(){
                    this.getData();
                },
            });

- Noob Coder

---

对于那些想知道$http是如何出现的人来说，这里有一个提示！使用vue-resource，你可以参考这里的指南：https://github.com/pagekit/vue-resource - Syed

我遇到了一个类似的问题，但我的情况是在表格内部使用带有server-side:true的ajax POST调用。该URL不仅会返回数据，还会返回每行中的按钮（如编辑或删除），而这些按钮中包含例如@click="editRow"的代码，但Vue无法渲染它们，因为它们是后来添加的。你能帮我解决这个问题吗？ - Japa

我建议你尽量避免使用jquery。Vue和jquery不兼容，同时使用它们会是一个非常糟糕的做法。如果你正在使用Vue，那么就只使用Vue。它非常强大，能够比jquery更高效地完成任何任务。 - Noob Coder

Answer 2

你可以尝试查看属性https://v2.vuejs.org/v2/guide/computed.html#Watchers。从文档中可以看到：

虽然在大多数情况下计算属性更合适，但有时需要自定义观察器。这就是为什么 Vue 通过 watch 选项提供一种更通用的方式来响应数据变化。当您想要对变化的数据执行异步或昂贵的操作时，这是最有用的。

- Dmitry Kurmanov

Answer 3

我想有人提到计算属性是最好的方法，这也是我推荐的。

原因是，一旦您的模板引用计算属性，这将触发您的ajax调用。页面将渲染任何其他可用元素，并在ajax调用返回时渲染它接收到的数据。不需要代码中的任何特殊操作。

无论如何，这是它的外观...

例如，在您的html中...

 <table>
        <tr v-for="item in serverData">
            <td>{{item.name}}</td>
            <td>{{item.someOtherValue}}</td>
        </tr>
    </table>

export default {
  name: 'pets',
  data () {
    return {
    }
  },
  computed: {
    serverData: function() {
      // ajax call using axios - returns a json array []
      axios.get("http://localhost:8080/getSomeData")
      .success(function(data) {
          return data;
      };
    }
}

}

注意ajax调用返回的成功promise中的返回值 - 没有必要将数据存储到另一个变量中（而且绝对不应该像上面展示的初学者示例那样循环遍历它）。在服务器端执行此操作，返回一个可呈现的数组 - 如果不是您的Web服务，则编写自己的代码调用原始数据并在那里进行数据操作。

引用计算值的模板部分将在数据到达后呈现 - 无需监视它。

希望能有所帮助！Vue非常好用！

- Rodney P. Barbati

Answer 4

    <template>
    <div class="panel panel-default tablecontainer">
        <div class="panel-heading">ChartBookin Import</div>
        <br>
        <div class='col-md-12'>
            <div class='col-md-3'></div>
            <div class='col-md-3'>
                <div class="panel panel-default">

                    <div class="panel-body">
                        <commitChart :width="150"
                                     :height="150"></commitChart>
                    </div>

                </div>
            </div>

            <div class='col-md-3'>
                <div class="panel panel-default">

                    <div class="panel-body">
                        <InboxMessage :width="150"
                                     :height="150"></InboxMessage>
                    </div>

                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class='col-md-3'>
                <label> by Account </label>
                <select v-model="teamId" class="form-control" rows="3">
                    <option VALUE="" disabled> CHOISIR UN TEAM</option>
                    <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option>
                </select>
            </div>
            <div class='col-md-3'>
                <label> by Date</label>
                <div class="form-group">

                    <input type="text" class="form-control" name="daterange"
                           value="01/01/2017-01/31/2017"/>
                </div>
            </div>
            <div class='col-md-5'></div>
            <div class='col-md-1'>
                <label>Records</label>
                <div class="form-group">

                    <select v-model="elementsPerPage" class="form-control">

                        <option v-for="option in filtre" v-bind:value="option">
                            {{ option }}
                        </option>
                    </select>
                </div>
            </div>

            <div id="sixthTable">

                <table class="table-bordered table-striped table-bordered table-hover">
                    <thead>
                    <tr>

                        <th v-for=" (key,value) in rows[0]" v-on:click="sortTable(value)">{{value}}
                            <div class="arrow" v-if="value == sortColumn"
                                 v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
                        </th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-if=" rows.length > 0" v-for="row in rows">
                        <td v-for="(key, value) in row">{{ key }}</td>
                        <td>
                            <a :href="'/stat_booking_import/' + row.Id">
                                <span class="glyphicon glyphicon-eye-open"></span>
                            </a>

                        </td>
                    </tr>
                    <tr v-else> No Result Founded</tr>
                    </tbody>

                </table>
                <div class="pagination">


                    <div id="paginatebutton">
                        <a href="#">&laquo;</a>
                        <a class="" v-for="i in num_pages()"
                           v-bind:class="[i == currentPage ? 'active' : '']"
                           v-on:click="change_page(i)">{{i}}
                        </a>
                        <a href="#">&raquo;</a>
                    </div>

                    <div class="col-md-12" id="paginatetexte">
                        <p v-if="pages > (elementsPerPage*currentPage) ">
                            Showing 1 to {{elementsPerPage * currentPage }} of {{ pages }} records
                        </p>
                        <p v-else>
                            Showing 1 to {{pages}} of {{ pages }} records
                        </p>
                    </div>

                </div>
            </div>

        </div>
    </div>


</template>


<script>
    import Vue from 'vue';
    import axios from 'axios';
    import CommitChart from './Mail';
    import InboxMessage from './Inbox';


    export default {
        components: {
            CommitChart,
            InboxMessage

        },
        data() {
            return {
                filtre: [10, 25, 50, 100],
                option: 0,
                options: [],
                currentPage: 1,
                elementsPerPage: 10,
                pages: 0,
                ascending: false,
                sortColumn: '',
                startdate: null,
                enddate: null,
                options: [],
                teamId: null,
                columns: [],
                messages: [],
                date: 0,
                rows: {},
            }
        },

        created() {
            this.getData();
            this.getTeams();
            this.getMailInbox();

        },
        mounted() {
            let vm = this;
            $(document).ready(function () {
                $('input[name="daterange"]').daterangepicker({
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')]
                    },
                    locale: {
                        format: 'YYYY-MM-DD'
                    },
                });

                $('.applyBtn').click(function () {
                    vm.startdate = $("input[name=daterangepicker_start]").val();
                    vm.enddate = $("input[name=daterangepicker_end]").val();
                    vm.getData();


                });
                $('input[name="daterange"]').on('apply.daterangepicker', function (ev, picker) {
                    vm.startdate = $("input[name=daterangepicker_start]").val();
                    vm.enddate = $("input[name=daterangepicker_end]").val();
                    vm.getData();
                });

            });
        },
        watch: {
            date: function () {
                this.getData();
            },
            teamId: function () {
                this.getData();
            },
            elementsPerPage: function () {
                this.getData();
            }


        },
        methods: {

            getData() {

                axios.get(`/admin/stat_booking_import.json/` + this.startdate + `/` + this.teamId + `/` + this.enddate + `/` + this.elementsPerPage + `?page=` + this.currentPage)
                    .then(response => {
                        this.rows = response.data.elements.data;
                        this.columns = Object.keys(this.rows[0]);
                        this.pages = response.data.elements.total_element;
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })

            },
            getTeams() {
                axios.get('/admin/team.json')
                    .then(response => {
                        this.options = response.data.data;
                        this.errors = [];

                    })
                    .catch(e => {
                        e.message = "aucun resultat trouvé essayer de choisir une autre date";
                        this.errors.push(e)
                    })
            },
            getMailInbox() {
                axios.get(`/mailstorage.json`)
                    .then(response => {
                        this.messages = response.data.data;
                        console.log(this.messages);

                    })
                    .catch(e => {
                        this.errors.push(e)
                    });
            },

            sortTable(col) {
                if (this.sortColumn === col) {
                    this.ascending = !this.ascending;
                } else {
                    this.ascending = true;
                    this.sortColumn = col;
                }

                var ascending = this.ascending;

                this.rows.sort(function (a, b) {
                    if (a[col] > b[col]) {
                        return ascending ? 1 : -1
                    } else if (a[col] < b[col]) {
                        return ascending ? -1 : 1
                    }
                    return 0;
                })
            },
            num_pages() {

                return Math.ceil(this.pages / this.elementsPerPage);
            },
            get_rows() {
                var start = (this.currentPage - 1) * this.elementsPerPage;
                var end = start + this.elementsPerPage;
                return this.rows.slice(start, end);
            },
            change_page(page) {
                this.currentPage = page;
                this.getData();
            }
        },

    }


</script>
<style type="text/css">
    table {
        width: 100%;
    }

    table td {
        text-align: center;
    }

    table td {
        text-align: center;
        padding: 8px;

    }

    table td:last-child {
        border-right: none;
    }

    .pagination {
        display: inline-block;
    }

    .pagination a {
        color: #3097D1;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
    }

    .pagination a.active {
        background-color: #3097D1;
        color: white;
        border: 1px solid #3097D1;
    }

    .arrow_down {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
    }

    .arrow_up {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
    }

    .arrow {
        float: right;
        width: 12px;
        height: 15px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: bottom;
    }

    .number {
        display: inline-block;
        padding: 4px 10px;
        margin: 0px 5px;
        cursor: pointer;

    }

    .number:hover,
    .number.active {
        background-color: #3097D1;
        border-color: #3097D1;
    }

    #paginatetexte {
        padding-top: 6%;

import Vue from 'vue'


new Vue({
    el: '#statistique',
    render: h => h(require('./StatBookingImport.vue'))
});

<style type="text/css">
    table {
        width: 100%;
    }

    table td {
        text-align: center;
    }

    table td {
        text-align: center;
        padding: 8px;

    }

    table td:last-child {
        border-right: none;
    }

    .pagination {
        display: inline-block;
    }

    .pagination a {
        color: #3097D1;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
    }

    .pagination a.active {
        background-color: #3097D1;
        color: white;
        border: 1px solid #3097D1;
    }

    .arrow_down {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
    }

    .arrow_up {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
    }

    .arrow {
        float: right;
        width: 12px;
        height: 15px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: bottom;
    }

    .number {
        display: inline-block;
        padding: 4px 10px;
        margin: 0px 5px;
        cursor: pointer;

    }

    .number:hover,
    .number.active {
        background-color: #3097D1;
        border-color: #3097D1;
    }

    #paginatetexte {
        padding-top: 6%;
    }

    #paginatebutton {
        border-radius: 1px;
    }

    .tablecontainer {

        margin-right: 2%;
        margin-left: 2%;
    }

    .mailinbox {
        margin-left: 1%;
    }

</style>

<template>
    <div class="panel panel-default tablecontainer">
        <div class="panel-heading">ChartBookin Import</div>
        <br>
        <div class='col-md-12'>
            <div class='col-md-3'></div>
            <div class='col-md-3'>
                <div class="panel panel-default">

                    <div class="panel-body">
                        <commitChart :width="150"
                                     :height="150"></commitChart>
                    </div>

                </div>
            </div>

            <div class='col-md-3'>
                <div class="panel panel-default">

                    <div class="panel-body">
                        <InboxMessage :width="150"
                                     :height="150"></InboxMessage>
                    </div>

                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class='col-md-3'>
                <label> by Account </label>
                <select v-model="teamId" class="form-control" rows="3">
                    <option VALUE="" disabled> CHOISIR UN TEAM</option>
                    <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option>
                </select>
            </div>
            <div class='col-md-3'>
                <label> by Date</label>
                <div class="form-group">

                    <input type="text" class="form-control" name="daterange"
                           value="01/01/2017-01/31/2017"/>
                </div>
            </div>
            <div class='col-md-5'></div>
            <div class='col-md-1'>
                <label>Records</label>
                <div class="form-group">

                    <select v-model="elementsPerPage" class="form-control">

                        <option v-for="option in filtre" v-bind:value="option">
                            {{ option }}
                        </option>
                    </select>
                </div>
            </div>

            <div id="sixthTable">

                <table class="table-bordered table-striped table-bordered table-hover">
                    <thead>
                    <tr>

                        <th v-for=" (key,value) in rows[0]" v-on:click="sortTable(value)">{{value}}
                            <div class="arrow" v-if="value == sortColumn"
                                 v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
                        </th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-if=" rows.length > 0" v-for="row in rows">
                        <td v-for="(key, value) in row">{{ key }}</td>
                        <td>
                            <a :href="'/stat_booking_import/' + row.Id">
                                <span class="glyphicon glyphicon-eye-open"></span>
                            </a>

                        </td>
                    </tr>
                    <tr v-else> No Result Founded</tr>
                    </tbody>

                </table>
                <div class="pagination">


                    <div id="paginatebutton">
                        <a href="#">&laquo;</a>
                        <a class="" v-for="i in num_pages()"
                           v-bind:class="[i == currentPage ? 'active' : '']"
                           v-on:click="change_page(i)">{{i}}
                        </a>
                        <a href="#">&raquo;</a>
                    </div>

                    <div class="col-md-12" id="paginatetexte">
                        <p v-if="pages > (elementsPerPage*currentPage) ">
                            Showing 1 to {{elementsPerPage * currentPage }} of {{ pages }} records
                        </p>
                        <p v-else>
                            Showing 1 to {{pages}} of {{ pages }} records
                        </p>
                    </div>

                </div>
            </div>

        </div>
    </div>


</template>


<script>
    import Vue from 'vue';
    import axios from 'axios';
    import CommitChart from './Mail';
    import InboxMessage from './Inbox';


    export default {
        components: {
            CommitChart,
            InboxMessage

        },
        data() {
            return {
                filtre: [10, 25, 50, 100],
                option: 0,
                options: [],
                currentPage: 1,
                elementsPerPage: 10,
                pages: 0,
                ascending: false,
                sortColumn: '',
                startdate: null,
                enddate: null,
                options: [],
                teamId: null,
                columns: [],
                messages: [],
                date: 0,
                rows: {},
            }
        },

        created() {
            this.getData();
            this.getTeams();
            this.getMailInbox();

        },
        mounted() {
            let vm = this;
            $(document).ready(function () {
                $('input[name="daterange"]').daterangepicker({
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')]
                    },
                    locale: {
                        format: 'YYYY-MM-DD'
                    },
                });

                $('.applyBtn').click(function () {
                    vm.startdate = $("input[name=daterangepicker_start]").val();
                    vm.enddate = $("input[name=daterangepicker_end]").val();
                    vm.getData();


                });
                $('input[name="daterange"]').on('apply.daterangepicker', function (ev, picker) {
                    vm.startdate = $("input[name=daterangepicker_start]").val();
                    vm.enddate = $("input[name=daterangepicker_end]").val();
                    vm.getData();
                });

            });
        },
        watch: {
            date: function () {
                this.getData();
            },
            teamId: function () {
                this.getData();
            },
            elementsPerPage: function () {
                this.getData();
            }


        },
        methods: {

            getData() {

                axios.get(`/admin/stat_booking_import.json/` + this.startdate + `/` + this.teamId + `/` + this.enddate + `/` + this.elementsPerPage + `?page=` + this.currentPage)
                    .then(response => {
                        this.rows = response.data.elements.data;
                        this.columns = Object.keys(this.rows[0]);
                        this.pages = response.data.elements.total_element;
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })

            },
            getTeams() {
                axios.get('/admin/team.json')
                    .then(response => {
                        this.options = response.data.data;
                        this.errors = [];

                    })
                    .catch(e => {
                        e.message = "aucun resultat trouvé essayer de choisir une autre date";
                        this.errors.push(e)
                    })
            },
            getMailInbox() {
                axios.get(`/mailstorage.json`)
                    .then(response => {
                        this.messages = response.data.data;
                        console.log(this.messages);

                    })
                    .catch(e => {
                        this.errors.push(e)
                    });
            },

            sortTable(col) {
                if (this.sortColumn === col) {
                    this.ascending = !this.ascending;
                } else {
                    this.ascending = true;
                    this.sortColumn = col;
                }

                var ascending = this.ascending;

                this.rows.sort(function (a, b) {
                    if (a[col] > b[col]) {
                        return ascending ? 1 : -1
                    } else if (a[col] < b[col]) {
                        return ascending ? -1 : 1
                    }
                    return 0;
                })
            },
            num_pages() {

                return Math.ceil(this.pages / this.elementsPerPage);
            },
            get_rows() {
                var start = (this.currentPage - 1) * this.elementsPerPage;
                var end = start + this.elementsPerPage;
                return this.rows.slice(start, end);
            },
            change_page(page) {
                this.currentPage = page;
                this.getData();
            }
        },

    }


</script>

    }

    #paginatebutton {
        border-radius: 1px;
    }

    .tablecontainer {

        margin-right: 2%;
        margin-left: 2%;
    }

    .mailinbox {
        margin-left: 1%;
    }

</style>

- radhouen