"id": 48627,
"address_id": 33058,
"customer": {
"id": 4161,
"sap": "126114",
"sap_be": "BE/126114",
"name": "ООО \"Сименс\"",
"name_en": "Siemens Mobility LLC",
"manager": []
},
"head_office": true,
"distributor_id": 3266,
"email": "nan",
"site": "www.shate-m.ru",
"state": {
"id": 317,
"name": "Центральный федеральный округ",
"abbr": "ЦФО",
"name_en": "Central Federal District",
"country": 47
},
"active": true
},
{
"id": 48628,
"address_id": 33059,
"customer": {
"id": 4162,
"sap": "137403",
"sap_be": "BE/137403",
"name": "ООО \"ШАТЕ-М ПЛЮС\"",
"name_en": "OOO \"SHATE-M PLUS\"",
"manager": []
},
"head_office": true,
"distributor_id": 3267,
"email": "info.msk@shate-m.com",
"site": "www.shate-m.ru",
"state": {
"id": 317,
"name": "Центральный федеральный округ",
"abbr": "ЦФО",
"name_en": "Central Federal District",
"country": 47
},
"active": true
},
и т.д..<Root> в инспекторе, а сама таблица <VtServerTable> остается такой же при нажатии на кнопку с соответствующим штатом, какая загружается при загрузке страницы. Такое ощущение, что к ней нужно как-то по-особенному обратиться или что-то вроде того...{% extends 'sycatalog/sy_profile.html' %}
{% block data %}
<div id="crm-app">
<div class="managers">
<ul>
<li v-for="manager in managers">{% verbatim %}{{ manager.name_raw }}{% endverbatim %}</li>
</ul>
</div>
<button class="btn btn-secondary" :class="{active:state==selectedState}" v-for="state in states" @click="stateFilter(state)">
{% verbatim %}{{ state.abbr }}{% endverbatim %}
</button>
<button class="btn btn-default" @click="stateFilter('')">Сбросить</button>
<v-server-table name="ttable" ref="table" url="/crm/customeroffice/" :columns="columns" :options="options">
</v-server-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tables-2@2.0.23/dist/vue-tables.js"></script>
<script>
Vue.config.devtools = true;
Vue.use(VueTables);
const ServerTable = VueTables.ServerTable;
const Event = VueTables.Event;
Vue.use(ServerTable);
new Vue({
el: "#crm-app",
methods: {
stateFilter: function(state) {
let url = '/crm/customeroffice/'
let params = {'state': state.id};
this.selectedState = state;
axios.get(url, {
params: params
}).then((response) => {
this.dataTable = response.data.results;
this.$refs.table.refresh();
}).catch( error => { console.log(error); })
.finally(() => (global_waiting_stop()));
//Event.$emit('vue-tables.ttable.filter::sstate', this.dataTable);
},
getManagers: function () {
let url = '/crm/crmuser/';
let data = {'type': 'responsibles'};
axios.get(url, {
params: data
}).then((response) => {
this.managers = response.data.results;
}).catch( error => { console.log(error); })
.finally(() => (global_waiting_stop()));
},
getStates: function () {
let url = '/crm/state/';
axios.get(url).then((response) => {
this.states = response.data.results;
}).catch( error => { console.log(error); })
.finally(() => (global_waiting_stop()));
}
},
mounted () {
this.getManagers();
this.getStates();
},
data() {
return {
//filterByColumn: true,
columns: ['id', 'customer.name', 'state.name'],
// editableColumns:['name'],
// sortable: ['sap', 'name'],
// filterable: ['sap', 'name'],
dataTable: [],
states: [],
selectedState: '',
managers: [],
options: {
//customFilters: ['sstate'],
requestFunction(data) {
return axios.get(this.url, {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}).finally(() => (global_waiting_stop()));
},
responseAdapter(resp) {
var data = this.getResponseData(resp);
return {data: data.results, count: data.count}
},
}
}
}
});
</script>
{% endblock %}var global_waiting = function() { $('body').append('<div class="waiting-wrapper"><i class="waiting fa fa-circle-o-notch fa-spin"></i></div>'); }
var global_waiting_stop = function() { $('.waiting-wrapper').remove(); }
Вот так таблица выводится пустая почему-то.. в инспекторе смотрю, после
</thead>таблица заканчивается и всё