VUE to obok Angulara, jedna z popularniejszych bibliotek front-endowych JS. Oto przykład tabeli reaktywnej HTML z filtrem i sortowaniem.

Framework VUE elastycznie łączy się z innymi frameworkami np. Framework7 czy Bootstrapem – tu przykład połączenia z tym drugim za pomocą biblioteki ze strony https://bootstrap-vue.js.org/

Wynik działania skryptu

tabelaVUE.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Tabela z filtrem i sortowaniem</title>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.0/dist/bootstrap-vue.css"/>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
      <!-- Bootstrap działa standardowo z jQuery, ta wersja biblioteki integruje BS z VUE: -->
    <script src="https://unpkg.com/bootstrap-vue@2.21.0/dist/bootstrap-vue.js"></script>
  </head>

  <body>
    <h1>Tabela reaktywna VUE</h1>
     
    <div id="app">
      <b-container><!-- Kontener Bootstrap-->
        <b-form-group horizontal label="Filtrowanie tabeli" class="mb-0">
          <b-input-group>
            <b-form-input v-model="filter" placeholder="Czego szukasz?" />
               </b-input-group>
          </b-form-group>    
         <template>
             <b-table striped hover
                     :items="items"
                     :fields="fields"
                     :filter="filter"
                     @row-clicked="rowClickHandler"
                   >
             </b-table>
          </template>
       
        </b-container>
    </div>
     
    <script>        
      window.app = new Vue({
        el: "#app",
        data: {
          filter: '',
          items: [ //tę tablicę trzeba wczytać z JSONa na serwerze zazwyczaj, my tu wpiszemy na sztywno:
            { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
            { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
            { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
            { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
          ],
          fields:
            [
             {
                key: "isActive", //kolumna z JSON
                sortable: false, //czy włączyć sortowanie dla tej kolumny
                label: "Aktywny" //Nagłówek tabeli
            },
            {
                key: "age",
                sortable: true,
                label: "Wiek"
            },
            {
                key: "first_name",
                sortable: true,
                label: "Imię"
            },
                           {
                key: "last_name",
                sortable: true,
                label: "Nazwisko"
            }
               
            ]
        },
         
         methods:
           {
                rowClickHandler: function(record, index) {
                //zdarzenie kliknięcia w wiersz
                        alert('wiersz:  ' + JSON.stringify(record) + '\nindex:' + index); // This will be the item data for the row
                }
         }
       
      });
</script>
  </body>
</html>

Wersja z danymi z pliku PHP

Przy pobieraniu plików z bazy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Tabela z filtrem i sortowaniem</title>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.0/dist/bootstrap-vue.css"/>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

      <!-- Bootstrap działa standardowo z jQuery, ta wersja biblioteki integruje BS z VUE: -->
    <script src="https://unpkg.com/bootstrap-vue@2.21.0/dist/bootstrap-vue.js"></script>
  </head>

  <body>
    <h1>Tabela/h1>
     
    <div id="app">
      <b-container><!-- Kontener Bootstrap-->
        <b-form-group horizontal label="Filtrowanie tabeli" class="mb-0">
          <b-input-group>
            <b-form-input v-model="filter" placeholder="Czego szukasz?" />
               </b-input-group>
          </b-form-group>    
         <template>
             <b-table striped hover
                      :items="items"
                      :fields="fields"
                      :filter="filter"
                      @row-clicked="rowClickHandler"
                    >
             </b-table>
          </template>
       
        </b-container>
    </div>
     
    <script>        
      window.app = new Vue({
        el: "#app",
        data: {
          filter: '',
          items: [],
          fields:
            [
             {
                key: "isActive", //kolumna z JSON
                sortable: false, //czy włączyć sortowanie dla tej kolumny
                label: "Aktywny" //Nagłówek tabeli
            },
            {
                key: "age",
                sortable: true,
                label: "Wiek"
            },
            {
                key: "first_name",
                sortable: true,
                label: "Imię"
            },
                           {
                key: "last_name",
                sortable: true,
                label: "Nazwisko"
            }
               
            ]
        },
         
        mounted: //po wczytaniu strony:
        function(){
          axios.
            get('https://tuadresGET/dane.php').
            then(response => {
                //let json1 = JSON.parse(response.data);
                console.log(response.data);
                this.items = response.data;
            });
       
        },
         methods:
           {
                rowClickHandler: function(record, index) {
                //zdarzenie kliknięcia w wiersz
                        alert('wiersz:  ' + JSON.stringify(record) + '\nindex:' + index); // This will be the item data for the row
                }
         }
       
      });
</script>
  </body>
</html>

plik z dane.php musi generować JSONa np.

1
2
3
<?php
echo "[{\"isActive\": true, \"age\": 40, \"first_name\": \"Dickerson\", \"last_name\": \"Macdonald\" }  ]";
?>

UWAGA na cudzysłowy w pliku!

JavaScript