Closed edgarscr closed 6 years ago
@edgarscr You should have posted in Vuetable-2 repo, otherwise, I may not have seen your post.
If possible, please put your code on jsfiddle or codepen to demonstrate its problem.
@ratiw i can't useon jsfiddle he need https i dont have https. yesterday i added new row's but the append-params dont load correctly the data every time said empty..
Vue.use(Vuetable);
//Vue.use(VueEvents);
new Vue({
el: '#app',
components: {
'vuetable-pagination': Vuetable.VuetablePagination
},
data: {
showingViewModal: false,
clickedTicket: {},
searchFor: '',
moreParams: [
'filter=swdf123123'
],
fields: [
{
name: 'ticket_number',
title: '<span class="orange glyphicon glyphicon-user"></span> Ticket',
//sortField: 'ticket_id',
dataClass: 'ticket_number'
}, {
name: 'ticket_date',
title: 'Datum',
// sortField: 'ticket_date',
dataClass: 'ticket_date'
}, {
name: 'time_watched',
title: 'Beobachtungszeit',
//sortField: 'time_watched',
dataClass: 'time_watched'
}, {
name: 'car_number',
title: 'Kennzeichen',
//sortField: 'car_number',
dataClass: 'car_number'
}, {
name: 'user_name',
title: 'Mitarbeiter',
// sortField: 'user_name',
dataClass: 'user_name'
}, {
name: 'street',
title: 'Adresse',
//sortField: 'street',
dataClass: 'street'
}, {
name: 'reasons',
title: 'Verstoß',
// sortField: 'reasons',
dataClass: 'reasons'
}, {
name: 'car_name',
title: 'Fahrzeugmarke',
// sortField: 'car_name',
dataClass: 'car_name'
},
'__slot:actions' ],
sortOrder: [
{ field: 'ticket_id', direction: 'desc' }
],
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 text-center',
activeClass: 'btn-primary',
disabledClass: 'disabled',
pageClass: 'btn btn-border',
linkClass: 'btn btn-border',
icons: {
first: 'fa fa-angle-double-left icon',
prev: 'fa fa-chevron-left icon',
next: 'fa fa-chevron-right icon',
last: 'fa fa-angle-double-right icon',
},
}
}
},
computed:{
/*httpOptions(){
return {headers: {'Authorization': "my-token"}} //table props -> :http-options="httpOptions"
},*/
}/*,
mounted () {
this.$events.$on('filter-set', eventData => this.onFilterSet(eventData))
this.$events.$on('filter-reset', e => this.onFilterReset())
}*/,
methods: {
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
viewRow(rowData){
this.clickedTicket = rowData;
//alert("You clicked edit on"+ JSON.stringify(rowData) + rowData.user_name)
},
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')
},/*
setFilter: function() {
this.moreParams = [
'filter=' + this.searchFor
]
this.$nextTick(function() {
this.$refs.vuetable.refresh()
})
},
resetFilter: function() {
this.searchFor = ''
this.setFilter()
},*/
onFilterSet (filterText) {
this.moreParams.filter = filterText
//this.moreParams['filter'] = filterText
this.$nextTick( () => this.$refs.vuetable.refresh() )
},
onFilterReset () {
delete this.moreParams.filter
this.searchFor = ''
this.$nextTick( () => this.$refs.vuetable.refresh() )
}
}
})
<div id="table-wrapper" class="ui container">
<vuetable ref="vuetable"
api-url="http://pw-ticket.de/admin/api.php?action=read"
:fields="fields"
pagination-path=""
:per-page="25"
:multi-sort="true"
:sort-order="sortOrder"
:append-params="moreParams"
:css="css.table"
@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="viewRow(props.rowData); showingViewModal = true; ">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<!--button class="btn btn-danger btn-sm" @click="deleteRow(props.rowData)">
<span class="glyphicon glyphicon-trash"></span> Delete</button-->
</div>
</template>
</vuetable>
<vuetable-pagination ref="pagination"
:css="css.pagination"
@vuetable-pagination:change-page="onChangePage"
></vuetable-pagination>
</div>
<div class="form-inline form-group">
<label>Search:</label>
<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>
With filter
without filter
@ratiw hey look here i replace data with ur original api. but i include the search try. https://codepen.io/eCarrera92/pen/GQKgGJ
@edgarscr You are able to fix your problem?
@Raiw yes, here i explain how fix and i have a new problem.
i explain here https://github.com/ratiw/vue-table/issues/177
i need to add the search system to this code: it's my first time using vuejs + vue table and i read the tutorial but i am confused. i just have this atm. now i need Search with multiple component example, ticket_number, user_id and more.
html
JS