ratiw / vue-table

data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
MIT License
1.83k stars 303 forks source link

Search with a extra data. #177

Closed edgarscr closed 6 years ago

edgarscr commented 6 years ago

Hello good night, i wanna know if u can help me to extract with a extra data

example of my API: http://pw-ticket.de/admin/api.php?sort=ticket_id%7Cdesc&page=1&per_page=20

i want to display:

total, total_filter, total_items, per_page

i followed this codepen https://codepen.io/ratiw/pen/GmJayw

i just added the search system with this extra code:

search form

<div class="form-inline form-group">
     <input v-model="searchFor" class="form-control" @keyup.enter="onFilterSet" placeholder="Ticket number, reasons, car name and more.">
      <button class="btn btn-primary" @click="onFilterSet">Go</button>
     <button class="btn btn-default" @click="onFilterReset">Reset</button>
</div>

vuetable :append-params="moreParams"

methods

     onFilterSet (searchFor) {
            this.moreParams.filter = this.searchFor
            //this.moreParams['filter'] = filterText
            this.$nextTick( () => this.$refs.vuetable.refresh() )
        },
        onFilterReset () {
            delete this.moreParams.filter
            this.searchFor = ''
            this.$nextTick( () => this.$refs.vuetable.refresh() )
        }

my search works good but i need to display the total of items founds.

i appreciate any help.

sorry my bad english. im from Venezuela.!

ratiw commented 6 years ago

@edgarscr Have you check out VuetablePaginationInfo in this lesson?

edgarscr commented 6 years ago

@ratiw yes i readed and try but no one changes i need to make this:

Displaying 20303 to 20323 of 15857 items => 15857 items

i need to display only total.

:pagination-info-template="{total} records"

i make that and dont work

ratiw commented 6 years ago

@edgarscr You can copy the source code of VuetablePaginationInfo and remove things you don't want to show.

edgarscr commented 6 years ago

@ratiw i did, and nothing happended, https://vuetable.ratiw.net/examples/bootstrap.html

ratiw commented 6 years ago

@edgarscr Sorry, I mean Vuetable-2 repo. As mentioned earlier, you posted your question in the wrong repo. This repo is for Vue 1.x and hasn't updated for a long time including its example.

edgarscr commented 6 years ago

oh sorry i have no idea of that sorry