问题解决:使用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遇到的分页图标丢失问题

相关文章
|
7月前
|
JavaScript 前端开发 Java
67jqGrid - 搜索操作工具栏
67jqGrid - 搜索操作工具栏
30 0
|
6天前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
6天前
|
前端开发
Element常用组件—表格、表单、对话框和分页工具条
Element常用组件—表格、表单、对话框和分页工具条
44 0
|
6月前
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
20 0
|
7月前
|
JavaScript 前端开发
07jqGrid - 翻页
07jqGrid - 翻页
26 0
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
点击对应的name名称跳转到下一页对应的tab栏的name的位置
147 0
|
JavaScript 测试技术
Easyui datagrid 修改分页组件的分页提示信息为中文
Easyui datagrid 修改分页组件的分页提示信息为中文
65 0
|
设计模式 存储 前端开发
分页复选设计的坑
什么是分页复选设计呢?
|
前端开发 JavaScript
bootstrap两端对齐链接实现上一页下一页翻页
bootstrap两端对齐链接实现上一页下一页翻页
174 0
bootstrap两端对齐链接实现上一页下一页翻页