Tabellen-Paging-Funktion implementiert durch Vue2.0+ElementUI+PageHelper

    <link rel="stylesheet" href="/core/element-ui/lib/theme-default/index.css" rel="externes nofollow" >
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/json2.js"></script>
    <script src="./js/vue.min.js"></script>  
    <script src="./js/vue-resource.js"></script>
    <script src="./element-ui/lib/index.js"></script>

<!-- Stil importieren -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="externes nofollow" >
<!-- Komponentenbibliothek importieren-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <Stil>
      .el-Auswahl .el-Eingabe {
        Breite: 110px;
      }
 
      .el-Tabelle .info-Zeile {
            Hintergrund: #c9e5f5;
      }   
 
      #Spitze {
          Hintergrund: #20A0FF;
          Polsterung: 5px;
          Überlauf: versteckt
      }
    </Stil>

    <div id="test">             
 
        <div id="oben">          
            <span style="float:right;"> 
                <el-button type="text" @click="add" style="color:white">Hinzufügen</el-button>  
                <el-button type="text" @click="deletenames" style="color:white">Stapellöschung</el-button>        
            </span>                     
        </div>  
 
 
        <br/>
 
        <div Stil="Rand oben:15px">
           <el-input placeholder="Bitte Inhalt eingeben" v-model="Kriterien" style="padding-bottom:10px;">
              <el-select v-model="Auswählen" slot="prepend" placeholder="Bitte auswählen">
                 <el-option label="id" value="1"></el-option>
                 <el-option label="name" value="2"></el-option>
              </el-Auswahl>
              <el-button slot="anhängen" icon="suchen" v-on:click="suchen"></el-button>
          </el-Eingabe>       
 
          <el-Tabelle
            ref="Testtabelle"       
            :data="Tabellendaten"
            Stil="Breite:100%"
            Grenze
            :default-sort = "{prop: 'id', order: 'aufsteigend'}"
            @selection-change="Auswahländerungsgriff"   
            @row-click="Handleklick"
            :Zeilenklassenname = "Tabellenzeilenklassenname"
            >
            <el-table-column
              Typ="Auswahl"
              >
            </el-Tabellenspalte>
            <el-table-column
              prop="Ich würde"
              Bezeichnung="Ich würde"
              sortierbar
              Überlauf-Tooltip anzeigen>
            </el-Tabellenspalte>
            <el-table-column
              Eigenschaft = "Name"
              Bezeichnung="Name"
              sortierbar>
            </el-Tabellenspalte>
            <el-table-column label="Vorgang">
              <Vorlage Umfang="Umfang">
                <el-Schaltfläche
                  Größe="klein"
                  Typ="primär"
                  @click="handleEdit(scope.$index, scope.row)">Bearbeiten</el-button>
                <el-Schaltfläche
                  Größe="klein"
                  Typ="Gefahr"
                  @click="handleDelete(scope.$index, scope.row)">Löschen</el-button>
              </Vorlage>
            </el-Tabellenspalte>
          </el-Tabelle>
 
          <div ausrichten="zentrieren">
              <el-pagination
                  @size-change="Größenänderungsgriff"
                  @current-change="AktuelleÄnderung handhaben"
                  :current-page="aktuelleSeite"
                  :Seitengrößen="[10, 20, 30, 40]"
                  :page-size="Seitengröße"
                  Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
                  :total="Gesamtzahl">
              </el-pagination>
          </div>
        </div> 
    </div>
 
    <Fußzeile ausrichten="center">
        <p>&copy; Vue.js 2.0 + ElementUI-Paging-Demo</p>
    </Fußzeile>

    <Skript>
    var vue = neuer Vue({         
            el:"#test",
            Daten: {       
                //Tabelle aktuelle Seitendaten tableData: [],
 
                //Mehrfachauswahl-Array multipleSelection: [],
 
                //Angeforderte URL
                URL: „newstu/querystudentbypage“,
 
                //Suchkriterien: '',
 
                //Dropdown-Menüoptionen auswählen: '',
 
                //Standardseitengröße: 10,
 
                //Standardmäßig hervorgehobene Zeilendaten-ID
                Highlight-ID: -1,
 
                //Aktuelle Seitennummer currentPage: 1,
 
                //Abfrageseitennummer beginnt: 1,
 
                //Standard-Gesamtdaten totalCount: 1000,
            },
 
            Methoden: {
 
                //Daten vom Server lesen loadData: function(criteria, pageNum, pageSize){                    
                    dies.$http.get(diese.url,{parameter:kriterien, seitennummer:seitennummer, seitengröße:seitengröße}).dann(funktion(res){
                        diese.tableData = res.data.pagestudentdata;
                        Dies ist die Gesamtanzahl der Datensätze, die in der Tabelle angezeigt werden.
                    },Funktion(){
                        console.log('fehlgeschlagen');
                    });                 
                },
 
                //Antwort mit Mehrfachauswahl handleSelectionChange: function(val) {
                    diese.multipleSelection = Wert;
                },
 
                //Klicken Sie auf die Zeilenantwort handleclick: function(row, event, column){
                    diese.highlightId = zeilen-id;
                },
 
                //Handle bearbeitenEdit: function(index, row) {
                    this.$prompt('Bitte geben Sie einen neuen Namen ein', 'prompt', {
                          confirmButtonText: 'Bestätigen',
                          cancelButtonText: 'Abbrechen',
                        }).then(({ Wert }) => {
                            wenn(Wert==''||Wert==null)
                                zurückkehren;
                            dies.$http.post('newstu/update',{"id":row.id,"name":value},{emulateJSON: true}).dann(function(res){
                                dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);                              
                            },Funktion(){
                                console.log('fehlgeschlagen');
                            });
                        }).catch(() => {
 
                    });
                },
 
 
                // einzelne Zeile löschen handleDelete: function(index, row) {
                    var-Array = [];
                    Array.push(Zeile.ID);
                    dies.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).dann(function(res){
                        dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);
                    },Funktion(){
                        console.log('fehlgeschlagen');
                    });
                },
 
                //Suchesearch: function(){
                    dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);
                },
 
                //hinzufügenhinzufügen: Funktion(){
                        this.$prompt('Bitte geben Sie einen Namen ein', 'prompt', {
                          confirmButtonText: 'Bestätigen',
                          cancelButtonText: 'Abbrechen',
                        }).then(({ Wert }) => {
                            wenn(Wert==''||Wert==null)
                                zurückkehren;
                            dies.$http.post('newstu/add',{"name":Wert},{emulateJSON: true}).dann(Funktion(res){
                                dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);
                            },Funktion(){
                                console.log('fehlgeschlagen');
                            });
                        }).catch(() => {
 
                    });
 
                },
 
                //Mehrere Löschungen deletenames: function(){
                    wenn(this.multipleSelection.length==0)
                        zurückkehren;
                    var-Array = [];
                    dies.multipleSelection.forEach((item) => {
                        : Array.push(Artikel.ID);
                    })
                    dies.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).dann(function(res){
                        dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);
                    },Funktion(){
                        console.log('fehlgeschlagen');
                    });
                },
 
                //Ändere die Klasse der aktuell angeklickten Zeile und markiere die aktuelle Zeile tableRowClassName: function(row, index){
                   wenn(row.id == diese.highlightId)
                   {
                      gib „Infozeile“ zurück;
                   }
                },
 
                //Ändern der pro Seite angezeigten Datenmenge handleSizeChange: function(val) {
                    diese.Seitengröße = Wert;
                    dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);
                },
 
                //Seitenzahl ändern handleCurrentChange: function(val) {
                    diese.aktuelleSeite = Wert;
                    dies.loadData(dieses.Kriterium, diese.aktuelleSeite, diese.Seitengröße);
                },        
 
            },      
 
 
          });
 
          //Daten laden vue.loadData(vue.criteria, vue.currentPage, vue.pagesize);
    </Skript>

    @AntwortBody
    @RequestMapping(Wert = "/querystudentbypage", Methode = RequestMethod.GET)  
    öffentliche Map<String, Object> querystudentbypage(@RequestParam(value="parameter")String-Parameter, 
            @RequestParam(value="Seitennummer")int Seitennummer, @RequestParam(value="Seitengröße")int Seitengröße) 
    {  
        Seite<Student> Seite = iNewStudentService.selectStudents(Parameter, Seitennummer, Seitengröße);
        Map<String, Objekt> map = neue HashMap<String, Objekt>();
        map.put("pagestudentdata", Seite);
        map.put("Zahl", page.getTotal());
        Rückfahrkarte;
    }

    öffentliche Seite<Student> selectStudents(String-Parameter, int Seitennummer, int Seitengröße)
    {
        Seite<Student> Seite = PageHelper.startPage(Seitennummer, Seitengröße);
        newstudentMapper.selectStudents(Parameter);
        Rückseite;
    }

    <select id="selectStudents" resultMap="NewStudentResultMap">
        Wählen Sie ID, Name des Studenten aus, wobei ID=#{parameter} oder Name wie CONCAT('%',#{parameter},'%')  
    </Auswählen>