问题解决:使用JqGrid实现列表分页,翻页图标无法显示

简介: 问题解决:使用JqGrid实现列表分页,翻页图标无法显示

问题:使用JqGrid实现列表翻页,翻页图片无法显示,但是图标没法显示,功能是完善的,只是图标看不到。

如图:


image.png


问题原因:

Bootstrap4中已经不再使用glyphicon字体(收费):


image.png


所以无法显示,你可以将Bootstrap4换低版本,比如换成3,也可以自己把3里面的字体整合进来。


这里我们可以使用一种比较简单的办法,就是先找到一些可以用的图标,然后通过JS替换掉这些用不了的图标即可,图标可以在这里找:


https://www.thinkcmf.com/font/font_awesome/icons.html#directional


代码参考:


$(function () {
  $("#first_jqGridPager").html("<span class=\"oi oi-media-step-backward\"><i class=\"fa fa-step-backward\" aria-hidden=\"true\"></i></span>");
  $("#prev_jqGridPager").html("<span class=\"oi oi-caret-left\"><i class=\"fa fa-backward\" aria-hidden=\"true\"></i></span>");
  $("#next_jqGridPager").html("<span class=\"oi oi-caret-right\"><i class=\"fa fa-forward\" aria-hidden=\"true\"></i></span>");
  $("#last_jqGridPager").html("<span class=\"oi oi-media-step-forward\"><i class=\"fa fa-step-forward\" aria-hidden=\"true\"></i></span>");
});


其他解决方案参考(未测试):

1、在BootStrap4.x中使用jqGrid5.4遇到的分页图标丢失问题

相关文章
|
JavaScript 前端开发 Java
67jqGrid - 搜索操作工具栏
67jqGrid - 搜索操作工具栏
61 0
|
6月前
|
缓存 JavaScript
【博客】 日期格式化显示,判断是否是最后一页等,悬浮显示菜单
【博客】 日期格式化显示,判断是否是最后一页等,悬浮显示菜单
23 1
|
6月前
Element UI 表格翻页全选
Element UI 表格翻页全选
31 0
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
点击对应的name名称跳转到下一页对应的tab栏的name的位置
242 0
|
JavaScript 测试技术
Easyui datagrid 修改分页组件的分页提示信息为中文
Easyui datagrid 修改分页组件的分页提示信息为中文
102 0
|
前端开发 JavaScript
bootstrap两端对齐链接实现上一页下一页翻页
bootstrap两端对齐链接实现上一页下一页翻页
225 0
bootstrap两端对齐链接实现上一页下一页翻页
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
|
前端开发
iview table后端分页 多选 翻页选中回显
iview table后端分页 多选 翻页选中回显
iview table后端分页 多选 翻页选中回显
|
存储 缓存 前端开发
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
668 0
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
|
数据库
分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?
目的: 1、一个页面(DataList.aspx)可以显示多个模块的列表功能。      一般是有一个列表需求就需要一个aspx文件,如果有100个列表,那么就会有100个aspx文件,这么多的文件(包括.aspx.cs文件)里面的内容基本是一样的,这样写起来麻烦,管理起来也不容易,命名就是一个比较头痛的问题。
1086 0