Permítanme primero presentar brevemente los conceptos básicos de Angular.js y Bootstrap.
AngularJS es un marco JavaScript. Se puede agregar a las páginas HTML a través de la etiqueta <script>.
AngularJS extiende HTML a través de directivas y une datos a HTML a través de expresiones.
Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
He estado aprendiendo angular.js recientemente y he practicado muchas demostraciones durante el proceso de aprendizaje. Aquí publicaré el formulario + paginación primero.
Echemos un vistazo al resultado final:
Tengo que decir que el estilo de código Angular.js es muy popular, y docenas de líneas de código implementan clara y concisa las funciones anteriores.
En primer lugar, la fuente de datos de la tabla proviene de server.js, haga clic para descargar. Obtenga el número y luego visualelo en la página.
1. La tabla se muestra a través de Ng-Repeat, y el código es el siguiente:
<Table> <tr> <TH> índice </th> <th ng-peat = "(x, y) en elementos [0]"> {{x}} </th> </tr> <tr ng-repeat = "x en elementos"> <TD> {{$ index + 1}}} </td> <td ng ng-ing = "x.name" </td> ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>$ índice es el parámetro predeterminado de repetición. El encabezado de la columna de la tabla es el valor de clave en la primera fila de la fuente de datos (JSON). Por supuesto, si Bootstrap necesita especificar que la clase de la tabla esté bordeada por la tabla.
2. La paginación también usa Ng-Repeat. Tengo que decir que Ng-Repeat es una instrucción común.
El código de paginación es el siguiente:
<nav><ul><li><a ng-click="Previous()"><span>Previous page</span></a></li><li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" ><a ng-click="selectPage(page)" >{{ page }}</a></li><li><a ng-click = "next ()"> <span> Página siguiente </span> </a> </li> </ul> </AV>Aquí usamos la instrucción del evento NG-CLICK. También utilizado comando de clase ng
ng-class = "{activo: isactivePage (página)}"El código anterior es el estilo seleccionado para la paginación.
Esta tabla agrega que la página a la página es una paginación falsa, que toma datos del backend una vez, y muestra los datos filtrados de JSON a través de diferentes paginas.
Código específico + Comentarios:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> table </title> <HEAD> <SHEW> <S neatt Archivo CSS-> <Link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> #divmain {ancho: 500px; margen: 0 auto; margen-top: 100px;} NAV { relativo; ancho: 100%; altura: 50px;}. Pagination {Right: 0px; Position: Absolute; Top: -30px;} Nav Li {cursor: pointer;} </style> <Div Id = "DivMain" ng-dapp = "myapp" ng-confontroller = "myctrl"> <table> <tr> <th> Índice ng-repeat = "(x, y) en elementos [0]"> {{x}} </th> </tr> <tr ng-depeat = "x en elementos"> <td> {{$ index + 1}}} </td> ng-bind = "x.country"> </td> </tr> </bable> <am> <ul> <li> <a ng-Click = "anterior ()"> <span> Página anterior </span> </a> </li> <li ng-repeat = "página en pageList" ng-class = "{activo: isactivePage (page)}"> <a ngLick = "PAGE) > {{Page}} </a> </li> <li> <a ng-click = "next ()"> <span> página siguiente </span> </a> </li> </ul> </am> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", function ($ scope, $ http) {$ http.get ("servicio.js"). entonces (function (respuesta) {// fuente de datos $ scope.data = respuesta.data.records; // número total de páginas $ scope.pagesize = 5; $ scope.pages = math.ceil ($ scope.data.length/$ scope.pagesize); // número de pagas $ scope.newpages ? fuera los datos mostrados actuales en la tabla por el número actual de páginas} $ scope.items = $ scope.data.slice (0, $ scope.pagesize); // la matriz a la que se repetirá la paginación para (var i = 0; i <$ scope.newpages; i ++) {$ scope.pageList.push (i+1);} $ scope.selectPage = function (página) {// no menos de 1 que el máximo if (página <1 || página> $ scope.pages) return; // El número máximo de páginas se muestra 5if (página> 2) {// porque solo se muestran 5 páginas, la conversión de la página comienza más grande que 2 páginas VAR newpageList = []; para (var i = (página - 3); $ scope.pages? $ scope.pages: (página + 2)); estilo $ scope.IsactivePage = function (página) {return $ scope.selpage == página;}; // página anterior $ scope.previous = function () {$ scope.selpage ($ scope.selpage - 1);} // página siguiente $ scope.next = function () {$ scope.selpage ($ scope.selpage + 1);};});}) </script> </body> </html>El editor le presentará mucho sobre la combinación de angular.js y bootstrap para implementar el código de paginación de la tabla, ¡y espero que sea útil para usted!