Home>

Needed js

angular.js (using angular.min.js will cause the paging control not to be displayed)

ui-bootstrap-tpls.min.js

angular-animate.js

Css needed

bootstrap.min.css

Since this project uses routing,Therefore, the applications of js and css files are placed in a main html. Please add the above files to the html page.

Before you start,Let me briefly introduce the principle of paging.

The essence of paging is actually a sql statement.

Such as finding the second page,I.e. 16th to 30th data

in mysql select * from table limit 15, 15 order by id desc

select * from (select top 15 * from
 (select top (30) * from table order by id desc) order by available asc) order by id desc
 oracle is (row in oracle starts from 1):select * from
  (select a. *, rownum from
  (select * from tablet order by id desc) a
  ) b
 where b.rownum between 16 and 30

In general,The data obtained by the query is sorted in reverse order.This puts the user's most recently inserted data first.

So how are these values ​​calculated in these three SQL statements?They are based on 1, which page the currentpage is currently on, and how many pages are displayed per pagesize.So the background needs to get these two values ​​from the front end.In order to tell users how many pages there are,We also have 3, how many totalsize.

Now that we have 1 2 3 above, we can do paging.On the front end we need a table to show us the data,You also need a small control,Let the user select the page,Bootstrap provides us with this small control (uib-pagination), which greatly reduces our workload.In the back end jpa provides us with a paging interface,We just need to inherit japrepository, zero code!

The following focuses on the usage of the interfaces provided by table, uib-pagination, and japrepository.

HTML page code:

<div data-ng-controller="questionctrl">
 <br>
 <table>
  <thead>
   <tr>
    <th><input type="checkbox"
     data-ng-model="allchecked" data-ng-change="checkall (allchecked)" /></th>
    <th>serial number</th>
    <th>topic</th>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>answer</th>
    <th>number of answers</th>
    <th>Correct number</th>
    <th>Correct rate</th>
   </tr>
  </thead>
  <tbody>
   <tr data-ng-repeat="item in items">
    <td><input type="checkbox"
     data-ng-model="item. $checked" data-ng-changed="checkedchange (item.id, item. $checked)" /></td>
    <td><span data-ng-bind="$index + 1"></span></td>
    <td
     data-ng-bind="item.test"<</td>
    <td data-ng-bind="item.op1"></td>
    <td data-ng-bind="item.op2"></td>
    <td data-ng-bind="item.op3"></td>
    <td data-ng-bind="item.op4"></td>
    <td data-ng-bind="item.answer"></td>
    <td data-ng-bind="item.total"></td>
    <td data-ng-bind="item.totalcorrect"></td>
    <td>
    <span data-ng-if="item.total!=0" data-ng-bind="item.totalcorrect/item.total * 100 | number:2"></span>
    <span data-ng-if="item.total == 0" data-ng-bind="0"
    %</td>
   </tr>
  </tbody>
 </table>
 <div>
 <button data-ng-click="deleteitems ()">delete</button>
 <span><uib-pagination total-items="totalitems" ng-model="currentpage" items-per-page="numperpage" max-size="maxsize" first-text="Home" previous-text="Previous page" next-text="next page" last-text="last page" boundary-links="true" ng-change="pagechanged ()" force-ellipses="false"<//uib-pagination></span>
 </div>
 </div>

Pagination is implemented through the uib-pagination tag,The tag attributes used are:

total-items:indicates how many records there are in total

items-per-page:how many records are displayed per page

max-size:determines the number of pages the user sees,I.e. the button that selects the page,Students who don't understand can adjust this value to see the changes

ng-model:the current page

The values ​​of the above 4 properties are two-way bound to js

boundary-link:Display "Home", "Last Page" buttons

force-ellipses:When the value is true, those exceeding max-size will also be displayed as ellipsis

The js code is as follows:

var app=angular.module ("app", ["ui.bootstrap", "nganimate"]);
app.controller ("questionctrl", function ($scope, $uibmodal, $http) {
 <span>$scope.currentpage=1;//current page
 $scope.numperpage=15;
 $scope.maxsize=5;
 $http ({
  url:"/getexamsbypage",  method:"post",  params:{
   "currentpage":$scope.currentpage-1,   "numperpage":$scope.numperpage
  }
 }). success (function (response) {
  $scope.totalitems=response.totalelements;
  $scope.items=response.content;
 });
 $scope.pagechanged=function () {
  $http ({
   url:"/getexamsbypage",   method:"post",   params:{
    "currentpage":$scope.currentpage-1,    "numperpage":$scope.numperpage
   }
  }). success (function (response) {
   $scope.totalitems=response.totalelements;
   $scope.items=response.content;
  });
 }</span>
 $scope.checkall=function (checked) {
  angular.foreach ($scope.items, function (item) {
   item. $checked=checked;
  });
 };
 $scope.deleteexam=function (id) {
  $http ({
   url:"/deleteexam",   method:"post",   params:{
    "id":id,    "currentpage":$scope.currentpage-1,    "numperpage":$scope.numperpage
   }
  }). success (function (response) {
   $scope.totalitems=response.totalelements;
   $scope.items=response.content;
  });
 }
 $scope.deleteitems=function () {
  var checkedlist=new array ();
  angular.foreach ($scope.items, function (item) {
   if (item. $checked == true)
    checkedlist.push (item.id);
  });
  $http ({
   url:"/deleteexams",   method:"post",   params:{
    "ids":checkedlist,    "currentpage":$scope.currentpage-1,    "numperpage":$scope.numperpage
   }
  }). success (function (response) {
   $scope.totalitems=response.totalelements;
   $scope.items=response.content;
  });
 };
});

Each time the background is requested, the current page and the number of each page need to be sent to the background.

The json data received in the foreground is like this

{"content":[{"id":225, "test":"Office automation is an application for computers.
Classified by computer application,it belongs to____. "," op1 ":" data processing "," op2 ":" scientific computing "," op3 ":" real-time control "," op4 ":" design aid "," answer ":" a "," total ":2, "totalcorrect":1}, {"id":224, "test":"The software consists of ___ and documentation.
"," op1 ":" data "," op2 ":" instruction "," op3 ":" program "," op4 ":" tool "," answer ":" c "," total ":2," totalcorrect ":1}, {" id ":223," test ":" A sequence of computer instructions written for a purpose is called ____. "," op1 ":" Software "," op2 ":" String "," op3 ":" Program "," op4 ":" Command "," answer ":" c "," total ":2," totalcorrect ":1}, {" id ":222," test ":" Office automation is an application for computers,Classified by computer application,it belongs to____. "," op1 ":" data processing "," op2 ":" scientific computing "," op3 ":" real-time control "," op4 ":" design aid "," answer ":" a "," total ":2, "totalcorrect":1}, {"id":220, "test":"A sequence of computer instructions written for a purpose is called ____. "," op1 ":" Software "," op2 ":" String "," op3 ":" Program "," op4 ":" Command "," answer ":" c "," total ":2," totalcorrect ":1}, {" id ":219," test ":" Office automation is an application for computers,Classified by computer application,it belongs to____. "," op1 ":" data processing "," op2 ":" scientific computing "," op3 ":" real-time control "," op4 ":" design aid "," answer ":" a "," total ":2, "totalcorrect":1}, {"id":218, "test":"The software consists of ___ and documentation.
"," op1 ":" data "," op2 ":" instruction "," op3 ":" program "," op4 ":" tool "," answer ":" c "," total ":2," totalcorrect ":1}, {" id ":217," test ":" A sequence of computer instructions written for a purpose is called ____. "," op1 ":" Software "," op2 ":" String "," op3 ":" Program "," op4 ":" Command "," answer ":" c "," total ":2," totalcorrect ":1}, {" id ":216," test ":" Office automation is an application for computers,Classified by computer application,it belongs to____. "," op1 ":" data processing "," op2 ":" scientific computing "," op3 ":" real-time control "," op4 ":" design aid "," answer ":" a "," total ":2, "totalcorrect":1}, {"id":215, "test":"The software consists of ___ and documentation.
"," op1 ":" data "," op2 ":" instruction "," op3 ":" program "," op4 ":" tool "," answer ":" c "," total ":2," totalcorrect ":1}]," last ":false," totalpages ":9," totalelements ":86," number ":0," size ":10," sort ":[{" direction ":" desc ", "property":"id", "ignorecase":false, "nullhandling":"native", "ascending":false}], "numberofelements":10, "first":true}

Background controller code

@requestmapping (value="/getexamsbypage")
 @responsebody
 public page<exam>getexamsbypage (@requestparam (value="currentpage", defaultvalue="0") integer page,   @requestparam (value="numperpage", defaultvalue="10") integer pagesize) {
  sort sort=new sort (direction.desc, "id");//Set the sort method
  pageable pageable=new pagerequest (page, pagesize, sort);//Build the pageable object, and the paging query is completed through the jpa's pagingandsortingrepository interface
  page<exam>exams=examrepository.findall (pageable);
  return exams;
 }

repository code:

@transactional
public interface examrepository extends jparepository<exam, integer>{
}

The findall method called in contoller is implemented by pagingandsortingrepository, but jparepository inherits from pagingandsortingrepository, so there is also a findall method. Students who do not understand can consult the information of the interface.

This completes the pagination display,The picture is as follows

to sum up

  • Previous Method for realizing front-end paging function based on LayUI
  • Next Android implementation of water ripple control method
  • Trends