bootstrap学习18—分页

最新推荐文章于 2022-01-17 09:04:29 发布
原创 最新推荐文章于 2022-01-17 09:04:29 发布 · 291 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了两种常见的分页样式：分页样式class=“pagination”和翻页样式class="pager"。其中，翻页样式下的.previous和.next类用于实现页面导航的两端对齐效果。

分页样式 class = “pagination”   

翻页样式 class = "pager"


pager 翻页样式下 .previous 和 .next 分别表示两端对齐

Bootstrap 分页
shengyin714959的博客
08-15 633
本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
Bootstrap分页
05-27
package com.org.controller; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.json.JSONObject; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import com.org.BaseController; import com.org.model.User; import com.org.service.IUserService; /** * @Author:liangjilong * @Date:2014-2-25 * @Version:1.0 * @Description: */ @Controller public class UserController extends BaseController { @Resource private IUserService userService; /*** * 方法一请求使用String * * 请求@RequestMapping匹配的URL request * * @param response * @return * @throws Exception */ @RequestMapping(value = "/userList1.do") public String userList1(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); List<User> lists = userService.getUserList(); if (lists != null) { request.setAttribute("userList", lists); } // userList指跳转到userList.jsp页面 return "userList"; } /** * 方法二请求使用ModelAndView * * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/userList2.do") public ModelAndView userList2(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); List<User> lists = userService.getUserList(); if (lists != null) { request.setAttribute("userList", lists); } // userList指跳转到userList.jsp页面 return new ModelAndView("userList"); } /*** * 自定义标签实现分页 * * @param request * @param response * @param @ResponseBody ajax响应 * @param method={RequestMethod.POST,RequestMethod.GET}表单请求 * @param consumes="application/json; charset=UTF-8"请求格式是json * @return * @throws UnsupportedEncodingException * @throws Exception */ @RequestMapping(value = "/pageList.do" ,method={RequestMethod.POST,RequestMethod.GET}) public @ResponseBody ModelAndView getUserInfo(Model model, @RequestParam(required = false) String username, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize) { try { String userName = new String(username.getBytes("ISO-8859-1"),"UTF-8");//处理乱码 Map<String, Object> map = new HashMap<String, Object>(); username=(username==null)?"":username; map.put("username", username);//username必须要和ibatis配置的property=username一致 Integer totalCount = this.userService.getUserCount(map); this.initPage(map, pageNum, pageSize, totalCount); List list = this.userService.getUserLists(map); this.initResult(model, list, map); return new ModelAndView("pagerList"); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 添加用户 * @param type * @param model * @return */ @RequestMapping("/addUser.do") public ModelAndView addUser(@RequestParam String username, Model model) { User user = new User(); user.setUsername(username); this.userService.addUser(user); return this.getUserInfo(model, null, null, null); } /*** * 删除用户 * @param id * @param pageNum * @param pageSize * @param model * @return */ @RequestMapping(value="/delUser.do",method={RequestMethod.POST,RequestMethod.GET},consumes="application/json; charset=UTF-8") @ResponseBody public ModelAndView delUser(@RequestParam(required = true) Integer id, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize, Model model, HttpServletRequest request,HttpServletResponse response) { PrintWriter out=null; JSONObject result=new JSONObject(); try { out=response.getWriter(); this.userService.delUserById(id); result.put("flag", true); out.write(result.toString()); } catch (Exception e) { try { result.put("flag", false); out.write(result.toString()); } catch (JSONException e1) { e1.printStackTrace(); } } return null; //return this.getUserInfo(model, null, pageNum, pageSize); } /*** * 编辑用户 * @param id * @param model * @return */ @RequestMapping("/getUserById.do") public ModelAndView getUserById(@RequestParam(required = true) Integer id, Model model) { User u = this.userService.getUserById(id); model.addAttribute("user", u); return new ModelAndView("editUser"); } /*** * 编辑用户 * @param id * @param model * @return */ @RequestMapping("/editUser.do") public ModelAndView editUser(@RequestParam(required = true) Integer id, @RequestParam String username, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize, Model model) { User u = new User(); u.setUsername(username); this.userService.editUser(u); return this.getUserInfo(model, null, pageNum, pageNum); } }
Bootstrap(二十二)
shi199434的博客
12-13 351
Bootstrap 分页 本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。 分页（Pagination） 下表列出了 Bootstrap 提供的处理分页的 class。 Class 描述 示例代码 .pagination 添加该 cl
Bootstrap分页插件之Bootstrap Paginator实例详解
10-21
Bootstrap分页插件，顾名思义，是Bootstrap框架下用于实现分页功能的JavaScript插件，这款插件在前端开发中使用非常广泛，尤其是在需要动态分页显示数据的网站项目中。Bootstrap Paginator作为这款插件的一种，为...
两款漂亮的bootstrap分页样式
12-13
在本主题中，我们聚焦于"两款漂亮的bootstrap分页样式"，这涉及到CSS3技术在Bootstrap分页组件上的应用。 Bootstrap的分页组件（Pagination）是一个基本的导航元素，用于分隔大量的内容或结果，让用户能够分步骤...
bootstrap table分页例子.zip
09-20
Bootstrap Table 是一...通过查看和学习这个例子，你可以更好地理解如何在自己的项目中集成和定制Bootstrap Table的分页功能。记得在实际使用时，根据具体需求调整代码，确保与后端接口良好配合，提供流畅的用户体验。
Bootstrap-table分页+汇总统计
08-03
在本场景中，“Bootstrap-table 分页 + 汇总统计”意味着我们将探讨如何利用 Bootstrap-table 实现表格的数据分页以及对数据进行总计和统计。 首先，为了实现分页，我们需要在 HTML 中设置表格的基本结构，并在 ...
Vue Cli与BootStrap结合实现表格分页功能
08-29
Vue Cli与BootStrap结合实现表格分页功能 该资源主要介绍了如何使用Vue Cli与BootStrap结合实现表格分页功能。...通过阅读本资源，开发人员可以学习如何使用Vue Cli和BootStrap来实现复杂的表格分页功能。
Bootstrap完美分页
05-01
自带MySQL数据库，BS框架响应式分页，值得下载
BootStrap分页
秋城落叶的博客
03-31 1339
1.默认分页 受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。 2.禁用和激活状态 链接在不同情况下可以定制。你可以给不能点击的链接添加.disabled类、给当前页添加.active类。 3.尺寸 .pagination-lg或.pagination-sm类提供了额...
BootStrap笔记-分页
IT1995的博客
01-17 1171
程序运行截图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--
bootstrap实现分页
风一样的男子
08-20 8181
1.官网下载bootstrap,bootstrap-table https://v3.bootcss.com/ http://bootstrap-table.wenzhixin.net.cn/ 2.引入css和js 此处引用的是themeleaf写法 &lt;link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet...
bootstrap实现分页功能
qq_39772439的博客
11-22 6954
功能其实很简单，主要细心就可以了。先上效果图，有点简陋，但是功能No problem！！ 实现这个功能需要一下几个步骤 第一步：引入boostrap插件(https://v3.bootcss.com/getting-started/#download有可能不全自己找) 这是需要引入的必须要的js及css 第二步：整理写js，下面写的够仔细，用的话直接复制 <script...
bootstrap分页
逸轩
12-12 1233
1、引入的css样式       我们需要引入bootstrap自带的表格样式，这样比较好看，如果再需要修改的话，我们就在其基础上再改。 "stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css"> "stylesheet" typ
Bootstrap-table分页功能实现及参数配置教程
Bootstrap-table之所以广受欢迎，是因为它在实现功能丰富的同时，也保证了操作的简易性，使得开发者可以以极低的学习成本，快速地集成到各种项目中。 ### Bootstrap-table后端分页参数设置 当数据量庞大时，分页是...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值