ratiw / vuetable-2

data table simplify! -- datatable component for Vue 2.x. See documentation at
https://vuetable.com
MIT License
2.15k stars 399 forks source link

Using CDN - Pagination not working #437

Open egordon721 opened 6 years ago

egordon721 commented 6 years ago

I am trying to get the sample code from the tutorial to work, the data displays on the grid, BUT, the pager never shows up. I have included my code below. Is there something I am missing?

<div id="table-wrapper" class="ui container">
        <h2><strong>&lt;Vuetable-2&gt;</strong> with Bootstrap 3</h2>
        <vuetable ref="vuetable"
                  api-url="https://vuetable.ratiw.net/api/users"
                  :fields="fields"
                  :sort-order="sortOrder"
                  :css="css.table"
                  pagination-path=""
                  :per-page="3"
                  @@vuetable :pagination-data="onPaginationData"
                  @@vuetable :loading="onLoading"
                  @@vuetable :loaded="onLoaded">
            <template slot="actions" scope="props">
                <div class="table-button-container">
                    <button class="btn btn-warning btn-sm" @@click="editRow(props.rowData)">
                        <span class="glyphicon glyphicon-pencil"></span> Edit
                    </button>&nbsp;&nbsp;
                    <button class="btn btn-danger btn-sm" @@click="deleteRow(props.rowData)">
                        <span class="glyphicon glyphicon-trash"></span> Delete
                    </button>&nbsp;&nbsp;
                </div>
            </template>
        </vuetable>
        <vuetable-pagination ref="pagination"
                             :css="css.pagination"
                             @@vuetable -pagination:change-page="onChangePage"></vuetable-pagination>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
    <script src="https://unpkg.com/vuetable-2@1.6.0"></script>

    <script>
        Vue.use(Vuetable);

new Vue({
  el: '#app',
  components: {
   'vuetable-pagination': Vuetable.VuetablePagination
  },
  data: {
    fields: [
      { 
        name: 'name', 
        title: '<span class="orange glyphicon glyphicon-user"></span> Full Name',
        sortField: 'name'
      }, 
      {
        name: 'email',
        title: 'Email',
        sortField: 'email'
      },
      'birthdate','nickname',
      {
        name: 'gender',
        title: 'Gender',
        sortField: 'gender'
      },
      '__slot:actions'
    ],
    sortOrder: [
      { field: 'name', direction: 'asc' }
    ],
    css: {
      table: {
        tableClass: 'table table-striped table-bordered table-hovered',
        loadingClass: 'loading',
        ascendingIcon: 'glyphicon glyphicon-chevron-up',
        descendingIcon: 'glyphicon glyphicon-chevron-down',
        handleIcon: 'glyphicon glyphicon-menu-hamburger',
      },
      pagination: {
        infoClass: 'pull-left',
        wrapperClass: 'vuetable-pagination pull-right',
        activeClass: 'btn-primary',
        disabledClass: 'disabled',
        pageClass: 'btn btn-border',
        linkClass: 'btn btn-border',
        icons: {
          first: '',
          prev: '',
          next: '',
          last: '',
        },
      }
    }
  },
  computed:{
  /*httpOptions(){
    return {headers: {'Authorization': "my-token"}} //table props -> :http-options="httpOptions"
  },*/
 },
 methods: {
    onPaginationData (paginationData) {
      this.$refs.pagination.setPaginationData(paginationData)
    },
    onChangePage (page) {
      this.$refs.vuetable.changePage(page)
    },
    editRow(rowData){
      alert("You clicked edit on"+ JSON.stringify(rowData))
    },
    deleteRow(rowData){
      alert("You clicked delete on"+ JSON.stringify(rowData))
    },
    onLoading() {
      console.log('loading... show your spinner here')
    },
    onLoaded() {
      console.log('loaded! .. hide your spinner here')
    }
  }
})

    </script>
ratiw commented 6 years ago

@egordon721 Is your code correct? I see two @ in the code above and it should have only one @. It is more or less the code I post in CodePen. Please check again.