Skip to content

Commit 2faae03

Browse files
tomrlhtomrlh
committed
Knowing the clear, add and refresh datatables functions
1 parent 09fe397 commit 2faae03

File tree

3 files changed

+64
-160
lines changed

3 files changed

+64
-160
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
3+
<!-- <img src="./assets/logo.png"> -->
44
<router-view/>
55
</div>
66
</template>

‎src/components/DataTable.vue‎

Lines changed: 27 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<table class="table table-bordered table-hover-imp table-striped dataTable" :id="id">
44
<thead>
55
<tr>
6-
<th v-for="c in columns">
7-
{{c}}
6+
<th v-for="c in columns">
7+
<span v-for="prop in c">
8+
{{prop}}
9+
</span>
810
</th>
911
</tr>
1012
</thead>
@@ -21,7 +23,7 @@
2123
<br>
2224
{{columns}}
2325
<br>
24-
{{data}}
26+
{{initDataTable().data()[0]}}
2527
</div>
2628
</div>
2729
</template>
@@ -36,58 +38,35 @@ export default {
3638
},
3739
watch: {
3840
data: function(newValue) {
39-
if($.fn.dataTable.isDataTable('#' + this.id)) {
40-
console.log('foi iniciada')
41-
let datatable = this.initDataTable()
42-
console.log('antes limpar')
43-
datatable.clear()
44-
datatable.draw()
45-
46-
datatable.rows.add(newValue).draw()
47-
console.log(datatable.data)
48-
}
49-
else {
50-
console.log('false')
51-
}
41+
let datatable = this.initDataTable()
42+
datatable.clear()
43+
datatable.rows.add(newValue).draw()
44+
console.log(datatable.data)
5245
}
5346
},
5447
methods: {
48+
addRow(newRow) {
49+
let datatable = this.initDataTable()
50+
datatable.rows.add([newRow]).draw()
51+
},
5552
clear() {
56-
console.log('clear method')
5753
let datatable = this.initDataTable()
58-
console.log('antes')
59-
console.log('columns', datatable.columns())
60-
console.log('columns', datatable.columns().indexes())
61-
console.log('rows', datatable.rows().data())
62-
// datatable.clear()
63-
// datatable.draw()
64-
console.log('depois')
65-
datatable.rows.add([{
66-
'col1': 'ADICIONADO1',
67-
'col2': 'ADICIONADO2'
68-
}]).draw()
69-
// console.log('columns', datatable.columns())
70-
// datatable.rows().invalidate().draw()
71-
// datatable.rows.add([
72-
// {
73-
// 'col1': 'NOVO2',
74-
// 'col2': 'NOVO2'
75-
// },
76-
// {
77-
// 'col1': 'NOVO3',
78-
// 'col2': 'NOVO4'
79-
// },
80-
// {
81-
// 'col1': 'NOVO3',
82-
// 'col2': 'NOVO4'
83-
// },
84-
// ]).draw()
85-
// console.log('depois', datatable.rows().data())
54+
datatable.clear().draw()
8655
},
8756
initDataTable() {
88-
return $('#' + this.id).DataTable({
89-
'retrieve': true
90-
})
57+
if(!$.fn.dataTable.isDataTable('#' + this.id)) {
58+
return $('#' + this.id).DataTable({
59+
retrieve: true,
60+
columns: this.columns,
61+
language: {
62+
url: '//cdn.datatables.net/plug-ins/1.10.13/i18n/Portuguese-Brasil.json'
63+
},
64+
autoWidth: true
65+
})
66+
}
67+
else {
68+
return $('#' + this.id).DataTable()
69+
}
9170
}
9271
},
9372
mounted() {

‎src/components/HelloWorld.vue‎

Lines changed: 36 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,10 @@
11
<template>
22
<div class="hello">
33
<h1>{{ msg }}</h1>
4-
<h2>Essential Links</h2>
5-
<ul>
6-
<li>
7-
<a
8-
href="https://vuejs.org"
9-
target="_blank"
10-
>
11-
Core Docs
12-
</a>
13-
</li>
14-
<li>
15-
<a
16-
href="https://forum.vuejs.org"
17-
target="_blank"
18-
>
19-
Forum
20-
</a>
21-
</li>
22-
<li>
23-
<a
24-
href="https://chat.vuejs.org"
25-
target="_blank"
26-
>
27-
Community Chat
28-
</a>
29-
</li>
30-
<li>
31-
<a
32-
href="https://twitter.com/vuejs"
33-
target="_blank"
34-
>
35-
Twitter
36-
</a>
37-
</li>
38-
<br>
39-
<li>
40-
<a
41-
href="http://vuejs-templates.github.io/webpack/"
42-
target="_blank"
43-
>
44-
Docs for This Template
45-
</a>
46-
</li>
47-
</ul>
48-
<h2>Ecosystem</h2>
49-
<ul>
50-
<li>
51-
<a
52-
href="http://router.vuejs.org/"
53-
target="_blank"
54-
>
55-
vue-router
56-
</a>
57-
</li>
58-
<li>
59-
<a
60-
href="http://vuex.vuejs.org/"
61-
target="_blank"
62-
>
63-
vuex
64-
</a>
65-
</li>
66-
<li>
67-
<a
68-
href="http://vue-loader.vuejs.org/"
69-
target="_blank"
70-
>
71-
vue-loader
72-
</a>
73-
</li>
74-
<li>
75-
<a
76-
href="https://github.com/vuejs/awesome-vue"
77-
target="_blank"
78-
>
79-
awesome-vue
80-
</a>
81-
</li>
82-
</ul>
834
<data-table :id="ide":columns="cols" :data="data" ref="filho"></data-table>
845
<button @click="limparTabela()">Limpar tabela</button>
85-
<button @click="gerarDados()">Novas linhas</button>
6+
<button @click="gerarDados()">Novos dados</button>
7+
<button @click="novaLinha()">Adicionar linha</button>
868
</div>
879
</template>
8810

@@ -96,77 +18,80 @@ export default {
9618
name: 'HelloWorld',
9719
data () {
9820
return {
99-
msg: 'Welcome to Your Vue.js App',
21+
msg: 'DataTables as Component (Implementing)',
10022
ide: 'id_tabela',
10123
cols: [
102-
{ 'name': 'col1' },
103-
{ 'name': 'col2' },
24+
{ data: 'col1' },
25+
{ data: 'col2' },
10426
],
10527
data: [
10628
{
107-
'col1': 'NOVO2',
108-
'col2': 'NOVO2'
29+
'col1': 'prop1',
30+
'col2': 'prop1'
10931
},
11032
{
111-
'col1': 'NOVO3',
112-
'col2': 'NOVO4'
33+
'col1': 'prop2',
34+
'col2': 'prop2'
11335
},
11436
{
115-
'col1': 'NOVO2',
116-
'col2': 'NOVO2'
37+
'col1': 'prop3',
38+
'col2': 'prop3'
11739
},
11840
{
119-
'col1': 'NOVO3',
120-
'col2': 'NOVO4'
41+
'col1': 'prop4',
42+
'col2': 'prop4'
12143
},
12244
{
123-
'col1': 'NOVO2',
124-
'col2': 'NOVO2'
45+
'col1': 'prop5',
46+
'col2': 'prop5'
12547
},
12648
{
127-
'col1': 'NOVO3',
128-
'col2': 'NOVO4'
49+
'col1': 'prop6',
50+
'col2': 'prop6'
12951
},
13052
{
131-
'col1': 'NOVO2',
132-
'col2': 'NOVO2'
53+
'col1': 'prop7',
54+
'col2': 'prop7'
13355
},
13456
{
135-
'col1': 'NOVO3',
136-
'col2': 'NOVO4'
57+
'col1': 'prop8',
58+
'col2': 'prop8'
13759
},
13860
{
139-
'col1': 'NOVO2',
140-
'col2': 'NOVO2'
61+
'col1': 'prop9',
62+
'col2': 'prop9'
14163
},
14264
{
143-
'col1': 'NOVO3',
144-
'col2': 'NOVO4'
65+
'col1': 'prop10',
66+
'col2': 'prop10'
14567
},
14668
{
147-
'col1': 'NOVO2',
148-
'col2': 'NOVO2'
69+
'col1': 'prop11',
70+
'col2': 'prop11'
14971
},
15072
{
151-
'col1': 'NOVO3',
152-
'col2': 'NOVO4'
73+
'col1': 'prop12',
74+
'col2': 'prop12'
15375
},
15476
],
15577
}
15678
},
15779
methods: {
80+
novaLinha() {
81+
this.$refs.filho.addRow({'col1': 'novaLinha1', 'col2': 'novaLinha2'})
82+
},
15883
limparTabela() {
15984
this.$refs.filho.clear()
16085
},
16186
gerarDados() {
16287
this.data = [
16388
{
164-
'col1': 'NOVO2',
165-
'col2': 'NOVO2'
89+
'col1': 'NOVO1',
90+
'col2': 'NOVO1'
16691
},
16792
{
168-
'col1': 'NOVO3',
169-
'col2': 'NOVO4'
93+
'col1': 'NOVO2',
94+
'col2': 'NOVO2'
17095
},
17196
]
17297
},

0 commit comments

Comments
 (0)