bootstrap table 修改成 jqGrid样式的分页栏

于 2019-01-30 20:08:03 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： bootstrapTable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25507769/article/details/86707770
版权
本文分享了如何将Bootstrap Table的分页栏改造成jqGrid样式的详细过程，主要涉及initPagination()方法的修改，通过移除原有分页栏并自定义新样式。在操作中需要注意所有方法调用需通过trigger方法代理。
摘要由CSDN通过智能技术生成

先上图

 

作为一个后台的人去改这玩意足足花了三天，悲催啊，还好年底没啥事。哈哈哈。

分页栏修改主要是initPagination()方法中做，将原来生成的分页栏去掉，添加自己的。如下：

这段代码给出，基本都会改了，依葫芦画瓢，我也是对着源码抄，^_^^_^^_^ ^_^。

需要注意的点是它里面所有的方法调用都是通过 trigger 方法代理一下。所以自己增加方法的话也用它代理一下

 

 

 

 

qq_25507769
关注
专栏目录
Bootstrap嵌入jqGrid，使你的table牛逼起来
11-23
1. **jqGrid在Bootstrap中的布局方案**：jqGrid的样式需要与Bootstrap的网格系统和布局相适应。在HTML结构中，将表格和分页组件放置在Bootstrap的`<div class="container">`内，确保它们能正确响应屏幕尺寸变化。...
bootstrap table 分页栏修改
01-30
通过修改bootstrap table js 定制出自己的分页栏，样式仿照jqGrid样式，支持输入页码跳转
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); } }
jqGrid的分页
weixin_34041003的博客
12-17 138
1、先导入三个jar包2、再导入两个css文件3、最后导入三个js文件4、jsp里引入css和js文件，注意先后顺序[html]view plaincopy<linktype="text/css"rel="stylesheet"href="css/bootstrap.min.css"media="screen"/><linktype="tex...
jqgrid插件样式修改
aike4954的博客
07-19 665
jqgrid插件样式颜色都有默认设置，以下是自己总结的可以改变表格样式： jqgrid使用需要引用ui.jqgrid.css文件，在此文件中可以改变表格样式 数据表格设置.ui-jqgrid tr.jqgrow td{font-weight:normal;overflow:hidden;text-align:left;white-space:pre;height:50px;paddi...
JQGrid 分页
09-30
JQGrid分页，包括CSS及JS文件。可直接在MyEclipse上直接运行。
bootstrap-table+treegrid实现树形表格
12-10
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 1、引入 jquery.js、bootstrap-table.js、...
jqGrid分页栏添加及相关问题
lsh15846393847的博客
08-15 1692
1.添加分页栏的步骤。     1.1  .jsp页面    &lt;div id="wfgs2010Pager"&gt;&lt;/div&gt; &lt;div id="wfgs2010GyousyaData" class="grid-table" &gt; &lt;table id="gridGyousyaData"&gt;&lt;/tab
jqGrid分页
yayachengyafang的专栏
08-29 940
jqGrid分页首先要在页面设置一个DIV的层。例如,在第一章就提到的 同时，要在jqGrid的配置中加入 jQuery("#grid_id").jqGrid({ ... pager : '#pager', ... }); 参照第二章 效果如下 分页实例 同时，这jqGrid中，在分页可以设定各种属性，例如没有找到数据时显
jqgriddemo,样式漂亮，可以直接使用
01-09
jqgriddemo,样式漂亮，可以直接使用，满足多种复杂的前端表格操作功能，有需要的小伙伴可以学习学习
JqGrid 纯Json自带分页功能
12-11
Jqgrid json 自身带的分页功能， 为了减轻数据库压力和提高加载速度，生成了纯JSON文件，想在本地自动分页，找了N多API均没有详细的介绍，最终摸索出来一个属性本身就自带分页功能，与大家分享
bootstrap集成table样式的总结
05-25
bootstrap集成table样式的总结，总结了各种bootstrap集成的table样式
bootstrap table单元格样式，行样式以及分页显示全部的设置
热门推荐
menghuannvxia的专栏
07-21 2万+
1、单元格样式： cellStyle : function cellStyle(value, row, index) { return { css : { "white-space" : "nowrap" } }; }, 2、 行样式： rowStyle:function rowStyle(row, index) { return {    css: {"white-spac
jqGrid细节备注—pager文字的设置，更改默认的提交方式
weixin_33845477的博客
11-16 313
默认的pager显示的文字，在英文版本下是如下 (file grid.locale-en.js): $.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext...
Bootstrap导航栏
遇见更好的自己
06-12 4790
1.表格导航或标签： 创建一个标签式的导航菜单 以一个带有class.nav的无序列表开始 添加class.nav-tabs<ul class="nav nav-tabs">//添加两个类 <li class="active"><a href="#">Home</a></li>//设置首页的选项处于选中状态 <li><a href="#">HTML</a></li>//鼠标经过时，背
简单实现修改jqgrid的翻页栏显示效果
沙漠渔溏
08-20 4877
沙漠渔溏--时间小记:2018年8月2日 11:29:12         从今年五一开始接触软件开发行业，看到公司做的web程序应用很多jqgrid插件，说句实话好多地方感觉好丑 话不多说先上代码再看演示(写的很糙,看网上没有,仅做参考吧) js文件 /*** * 2018年7月26日 09:19:56 * 基于jqGrid 4.4.3 */ (function ($) { ...
bootstrap table表格分页样式问题
qq_41962832的博客
11-07 4847
bootstrap table表格分页样式问题 今天项目里用到bootstrap做列表,数据展示没问题但是分页样式一直出不来,找了半天发现是因为没有引入css文件的问题 &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;Titl
替换jqgrid 分页小箭头样式
Alex81320的博客
12-20 3828
替换jqgrid 分页小箭头样式
Bootstrap Table实战：前后端分页与模糊查询优化
本篇学习笔记主要围绕Bootstrap Table的前后端分页与模糊查询功能展开，作者在实践中遇到的问题以及解决方法进行详细记录...整体来看，这篇笔记为新手和进阶者提供了一个实践Bootstrap Table分页和查询功能的实用指南。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值